D3js: Когда использовать .datum() и .data()?

Я часто вижу .datum, когда используется диаграмма области. Например:

svg = d3.select("#viz").append("svg").datum(data)

Существуют ли какие-либо эмпирические правила, когда требуется .datum?

var area = d3.svg.area()  
    .x(function(d) { return x(d.x); })  
    .y0(height)  
    .y1(function(d) { return y(d.y); });  

var svg = d3.select("body").append("svg")  
    .attr("width", width)  
    .attr("height", height);  

svg.append("path") 
    .datum(data)
    .attr("d", area);

Ответы

Ответ 1

Я думаю, что документация дает хороший ответ на этот вопрос: https://github.com/mbostock/d3/wiki/Selections#wiki-datum.

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

Обновление:. Это зависит от того, когда вы не ожидаете каких-либо динамических обновлений, что, кажется, имеет место в вашем примере, нулевая точка в порядке. Зачем? Поскольку еще нет элемента svg пути, существует только один элемент пути, и как только он будет добавлен, он не изменится.

Если у вас есть несколько элементов пути и динамические изменения (например, через каждую секунду удаляется старейший элемент данных и добавляется новый), вам понадобятся данные. Это даст вам три набора: наборы графических элементов, для которых больше нет данных, набор элементов, для которых обновляются данные, и набор элементов, для которых ранее не существовал элемент данных (соответственно, ввод, обновление и выходы). Как только вам это понадобится, я предлагаю вам ознакомиться с документацией d3.

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

Ответ 3

Другие связаны с учебником, но я думаю, что ссылка API на selection.datum дает принятый ответ:

Получает или задает связанные данные для каждого выбранного элемента. в отличие от метод selection.data, этот метод не вычисляет соединение (и, следовательно, не вычисляет выбор входа и выхода).

Поскольку он не вычисляет соединение, ему не нужно знать ключевую функцию. Поэтому обратите внимание на разницу между сигналами, только функция data принимает ключевую функцию

  • selection.datum([значение])
  • selection.data([values ​​[, key]])

Я думаю, что учебник для data дает еще одну принципиальную разницу, которая аналогична значению слов "данные" и "дата". То есть первое имеет множественное число, последнее - единственное. Следовательно, данные могут быть объединены двумя способами:

Присоединился к группам элементов с помощью selection.data.

Назначается отдельным элементам с помощью selection.datum.

@Hugolpz 'gist дает хорошие примеры значимости "групп" и "индивидуумов". Здесь json представляет массив данных. Обратите внимание, что datum связывает весь массив с одним элементом. Если мы хотим достичь того же с помощью data, мы должны сначала положить json внутри другого массива.

  • var chart = d3.select( "body" ). append ( "svg" ). data ([json])
  • var chart = d3.select( "body" ). append ( "svg" ). datum (json)