В чем разница между данными D3 и данными?

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

Ответ 1

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

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

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

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

или

(...).datum(data)

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

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

.....

Ответ 2

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

Хорошая дискуссия по D3 "data()": Понимание того, как D3.js связывает данные с узлами
D3 для простых смертных
Майк Босток D3 Wiki

В последнем:

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

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

...

# selection.datum([value])

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

Ответ 3

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

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

При поставке data как входной аргумент

selection.data(data) попытается выполнить объединение данных между элементами массива data с выбором, результатом которого станут выбор enter(), exit() и update(), которые вы можете впоследствии действуют на. Конечным результатом этого является то, что если вы передаете массив data = [1,2,3], делается попытка присоединиться к каждому отдельному элементу данных (т.е. Дате) с выбором. Каждый элемент выбора будет иметь только один элемент привязки data, связанный с ним.
selection.datum(data) полностью обходит процесс объединения данных. Это просто присваивает все элементы data всем элементам выбора в целом, не разбивая их, как в случае объединения данных. Поэтому, если вы хотите связать весь массив data = [1, 2, 3] с каждым элементом DOM в selection, тогда selection.datum(data) достигнет этого.

Предупреждение:. Многие считают, что selection.datum(data) эквивалентен selection.data([data]), но это верно только в том случае, если selection содержит один элемент. Если selection содержит несколько элементов DOM, затем selection.datum(data) свяжет всего data для каждого элемента в выборе. В контраст, selection.data([data]) связывает всего dataк первому элементу в selection. Это согласуется с поведение соединения данных selection.data.

При отсутствии входного аргумента data

selection.data() примет привязку привязки для каждого элемента в выборе и объединит их в массив, который возвращается. Итак, если ваш selection включает в себя 3 элемента DOM с привязанными к ним данными "a", "b" и "c", selection.data() возвращает ["a", "b", "c"]. Важно отметить, что если selection является единственным элементом с (в качестве примера) привязанным к нему привязкой "a", то selection.data() вернет ["a"], а не "a", как могут ожидать некоторые.
selection.datum() имеет смысл только для одного выбора, поскольку он определяется как возвращающий привязку , привязанную к первому элементу выбора. Итак, в приведенном выше примере с выбором, состоящим из элементов DOM со связанными данными "a", "b" и "c", selection.datum() просто вернет "a".

Обратите внимание, что даже если selection имеет один элемент, selection.datum() и selection.data() возвращают разные значения. Первый возвращает привязку привязки для выбора ("a" в приведенном выше примере), тогда как последний возвращает привязку привязки в массиве (["a"] в примере выше).

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

PS. Лучший способ понять, как это работает, - начать с чистого HTML-документа в Chrome и открыть консоль и попробовать добавить несколько элементов в документ, а затем начать привязывать данные с помощью selection.data и selection.datum. Иногда гораздо легче "заглядывать" чем-то, чем читать.