javascript - data - que es d3 js

¿Cuál es la diferencia D3 datum vs. data? (3)

Aquí hay algunos buenos enlaces:

Buena discusión sobre D3 "data ()": Comprender cómo D3.js vincula los datos a los nodos
D3 para simples mortales
Wiki D3 de Mike Bostock

Por el último:

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

Se une a la matriz de datos especificada con la selección actual. Los valores especificados son una matriz de valores de datos, como una matriz de números u objetos, o una función que devuelve una matriz de valores.
...
# selection.datum([value])

Obtiene o establece los datos vinculados para cada elemento seleccionado. A diferencia del método selection.data, este método no calcula una combinación (y por lo tanto no calcula las selecciones de entrada y salida).

¿Puede alguien explicar la diferencia entre dato () y datos () en D3.js? Veo que ambos se utilizan y no estoy seguro de por qué debe elegir uno sobre el otro?

Después de haber analizado esto un poco, he encontrado que las respuestas aquí en SO no están completas, ya que solo cubren el caso cuando se invocan selection.data y selection.datum con un parámetro de data entrada. Incluso en ese escenario, los dos se comportan de manera diferente si la selección es un elemento único frente a cuando contiene múltiples elementos. Además, ambos métodos también se pueden invocar sin ningún argumento de entrada para consultar los datos / dato encuadernados en la selección, en cuyo caso una vez más se comportan de manera diferente y devuelven cosas diferentes.

Editar - Publiqué aquí una respuesta un poco más detallada a esta pregunta, pero la publicación siguiente captura bastante todos los puntos clave con respecto a los dos métodos y cómo se diferencian entre sí.

Al suministrar data como un argumento de entrada

selection.data(data) intentará realizar una unión de datos entre los elementos de la matriz de data con la selección que dará como resultado la creación de las selecciones enter() , exit() y update() que puede operar posteriormente. El resultado final de esto es si transfiere una matriz de data = [1,2,3] , se intenta unir cada elemento de datos individual (es decir, dato) con la selección. Cada elemento de la selección solo tendrá un elemento de datum único de data vinculado a él.
selection.datum(data) omite por completo el proceso de unión de datos. Esto simplemente asigna la totalidad de los data a todos los elementos de la selección como un todo sin dividirlos como en el caso de las combinaciones de datos. Por lo tanto, si desea vincular una matriz de data = [1, 2, 3] a cada elemento DOM en su selection , entonces selection.datum(data) logrará esto.

Advertencia: muchas personas creen que selection.datum(data) es equivalente a selection.data([data]) pero esto solo es cierto si la selection contiene un solo elemento . Si la selection contiene múltiples elementos DOM, entonces selection.datum(data) vinculará la totalidad de los data a cada elemento de la selección. Por el contrario, selection.data([data]) solo vincula la totalidad de los data al primer elemento en la selection . Esto es coherente con el comportamiento de unión de datos de selection.data .

Cuando no se proporciona ningún argumento de entrada de data

selection.data() tomará el dato vinculado para cada elemento en la selección y los combinará en una matriz que se devuelve. Entonces, si su selection incluye 3 elementos DOM con los datos "a" , "b" y "c" vinculados a cada uno respectivamente, selection.data() devuelve ["a", "b", "c"] . Es importante tener en cuenta que si la selection es un elemento único con (a modo de ejemplo) el dato "a" vinculado a él, entonces selection.data() devolverá ["a"] y no "a" como algunos pueden esperar .
selection.datum() solo tiene sentido para una sola selección, ya que se define como devolver el dato vinculado al primer elemento de la selección. Entonces, en el ejemplo anterior con la selección que consiste en elementos DOM con datos vinculados de "a" , "b" y "c" , selection.datum() simplemente devolvería "a" .

Tenga en cuenta que incluso si la selection tiene un único elemento, selection.datum() y selection.data() devuelven valores diferentes. El primero devuelve el dato vinculado para la selección ( "a" en el ejemplo anterior), mientras que el segundo devuelve el dato vinculado dentro de un conjunto ( ["a"] en el ejemplo anterior).

Esperemos que esto ayude a aclarar cómo selection.data y selection.datum() difieren entre sí tanto al proporcionar datos como un argumento de entrada como al consultar el dato vinculado al no proporcionar ningún argumento de entrada.

PD: la mejor manera de entender cómo funciona esto es comenzar con un documento HTML en blanco en Chrome y abrir la consola e intentar agregar algunos elementos al documento y luego comenzar a vincular los datos usando selection.data y selection.datum . A veces, es mucho más fácil "asimilar" algo haciendo que leyendo.

Encontré la respuesta correcta aquí del propio Mike:

D3: ¿cómo lidiar con las estructuras de datos JSON?

Si desea vincular sus datos a un solo elemento SVG, use

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

(...).datum(data)

Si desea vincular sus datos a múltiples elementos SVG

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

.....