¿Cuál es la diferencia D3 datum vs. datos?

Presta atención porque en este artículo hallarás la solución que buscas.

Solución:

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])

o

(...).datum(data)

Si desea vincular sus datos a múltiples elementos SVG

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

…..

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

Editar: publiqué una respuesta un poco más detallada a esta pregunta aquí, pero la publicación a continuación captura prácticamente todos los key puntos con respecto a los dos métodos y cómo se diferencian entre sí.

Al suministrardata como un argumento de entrada

• selection.data(data) intentará realizar una combinación de datos entre los elementos del data array con la selección resultando en la creación de enter(), exit() y update() selecciones en las que puede operar posteriormente. El resultado final de esto es si pasa en un array 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 sólo tendrá un único elemento de referencia de data obligado a ello.

• selection.datum(data) omite el proceso de combinación de datos por completo. Esto simplemente asigna la totalidad de data a todos los elementos de la selección como un todo sin dividirlos como en el caso de las uniones de datos. Entonces, si desea enlazar todo un array data = [1, 2, 3] a cada elemento DOM en tu selectionluego selection.datum(data) logrará esto.

Advertencia: Mucha gente cree que selection.datum(data) es equivalente a selection.data([data]) pero esto es solo true si
selectioncontiene un solo elemento. Si selection contiene múltiples elementos DOM, entonces selection.datum(data) vinculará la totalidad de data a cada uno de los elementos de la selección. A diferencia de, selection.data([data]) solo une la totalidad de data
al primer elemento de selection. Esto es consistente con el comportamiento de unión de datos de selection.data.

Al no suministrar data argumento de entrada

• selection.data() tomará el dato enlazado para cada elemento en la selección y los combinará en un array que se devuelve. Entonces, si tu selection incluye 3 elementos DOM con los datos "a", "b" y "c" ligado a cada uno respectivamente, selection.data() devoluciones ["a", "b", "c"]. Es importante señalar que si selection es un solo elemento con (a modo de ejemplo) el dato "a" ligado a él, entonces selection.data() regresará ["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 ligado al primer elemento de la selección Entonces, en el ejemplo anterior con la selección que consta de elementos DOM con datos vinculados de "a", "b" y "c", selection.datum() simplemente volvería "a".

Tenga en cuenta que incluso si selection tiene un solo elemento, selection.datum() y selection.data() devolver valores diferentes. El primero devuelve el dato enlazado para la selección ("a" en el ejemplo anterior) mientras que el último devuelve el dato enlazado dentro de un array (["a"] en el ejemplo anterior).

Espero 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 enlazado 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 datos usando selection.data y selection.datum. A veces, es mucho más fácil “asimilar” algo haciendo que leyendo.

Aquí hay algunos buenos enlaces:

• Buena discusión sobre “datos ()” de D3: comprensión de cómo D3.js vincula datos a nodos

• D3 para simples mortales

• Wiki D3 de Mike Bostock

Por este último:

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

Se une a lo especificado array de datos con la selección actual. Los valores especificados son un array de valores de datos, como un array de números u objetos, o una función que devuelve un array de valores

…

# selection.datum([value])

Obtiene o establece los datos enlazados 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).

---

---

Utiliza Nuestro Buscador