Какая разница Д3 и базы данных?

может кто-нибудь объяснить разницу между datum() и data() в D3.Джей? Я вижу, как используется, и я не уверен, почему вы должны выбрать один над другим?

4 173
javascript d3.js

4 ответа:

Я нашел правильный ответ здесь от самого Майка:

D3-как работать со структурами данных JSON?

Если вы хотите привязать свои данные к одному элементу SVG, используйте 

(...).data([data])

или

(...).datum(data)

Если вы хотите привязать свои данные к нескольким элементам SVG

(...).data(data).enter().append("svg")

.....

147

вот некоторые хорошие ссылки:

в последнем:

# selection.data([values[, key]])

соединяет указанный массив данных с текущим выделением. Этот указанный values-это массив значений данных, таких как массив числа или объекты, или функция, которая возвращает массив значений.

...

# selection.datum([value])

возвращает или задает связанные данные для каждого выбранного элемента. В отличие от выбор.метод данных, этот метод не вычисляет соединение (и таким образом не вычисляет параметры ввода и выхода).

36

изучив это немного, я обнаружил, что ответы здесь на SO не являются полными, поскольку они охватывают только случай, когда вы вызываете selection.data и selection.datum С помощью

31

Я думаю, что объяснение, данное HamsterHuey является лучшим до сих пор. Чтобы расширить его и дать визуальное представление о различиях, я создал образец документа, который иллюстрирует по крайней мере часть различий между data и datum.

приведенный ниже Ответ является скорее мнением, полученным из использования этих методов, но я рад быть исправленным, если я ошибаюсь.

этот пример можно запустить ниже или в этом Скрипка.

const data = [1,2,3,4,5];
const el = d3.select('#root');

 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node => data: ${d}`);

const join= el
.selectAll('div.b')
.data(data);

join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)

думаю, что datum проще понять, так как он не выполняет соединение, но, конечно, это также означает, что он имеет разные варианты использования.

для меня одна большая разница-хотя есть и больше-это то, что data это просто естественный способ делать (живые) обновления на диаграмме d3, так как весь шаблон ввода/обновления/выхода делает его простым, как только вы его получите.

datum С другой стороны, мне кажется, больше подходит для статических представления. В приведенном ниже примере, Например, я мог бы достичь того же результата, что и мой цикл по исходному массиву и доступ к данным по индексу:

data.map((n, i) => {
 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node-${n} => data: ${d[i]}`);
});

Попробуйте здесь:https://jsfiddle.net/gleezer/e4m6j2d8/6/

опять же, я думаю, что это намного проще понять, поскольку вы свободны от умственной нагрузки, исходящей из шаблона ввода/обновления/выхода, но как только вам нужно обновить или изменить выбор, вам, безусловно, будет лучше прибегнуть к .data().

const data = [1,2,3,4,5];
const el = d3.select('#root');

 el
  .append('div')
  .classed('a', true)
  .datum(data)
  .text(d => `node => data: ${d}`);

const join= el
.selectAll('div.b')
.data(data);

join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)
/* Ignore all the css */
html {
  font-family: arial;
}

.l {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0;
}
.l-a {
  background: #cf58e4;
}
.l-b {
  background:  #42e4e4;
}

.a {
  border-bottom: 2px solid #cf58e4;
}

.b {
  border-bottom: 2px solid #42e4e4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>


<div style="margin-bottom: 20px;">
  <span class="l l-a"></span> .datum() <br />
  <span class="l l-b"></span> .data()
</div>

<div id="root"></div>
0