javascript - que - Comprender cómo D3.js vincula los datos a los nodos

d3.js tutorial

Question

Estoy leyendo la documentación de D3.js y me es difícil entender el método de selection.data de datos de la documentación.

Este es el código de ejemplo dado en la documentación:

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var tr = d3.select("body").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr");

var td = tr.selectAll("td")
    .data(function(d) { return d; })
  .enter().append("td")
    .text(function(d) { return d; });

Entiendo la mayor parte de esto, pero ¿qué está pasando con la sección .data(function(d) { return d; }) de la instrucción var td ?

Mi mejor suposición es la siguiente:

• La sentencia var tr ha unido una matriz de cuatro elementos a cada nodo tr
• La instrucción var td luego usa esa matriz de cuatro elementos como sus datos, de alguna manera

¿Pero cómo .data(function(d) { return d; }) esos datos, y qué devuelve?

Answer 1

Cuando escribes:

….data(someArray).enter().append(''foo'');

D3 crea un grupo de elementos <foo> , uno para cada entrada en la matriz. Más importante aún, también asocia los datos para cada entrada en la matriz con ese elemento DOM, como una propiedad __data__ .

Prueba esto:

var data = [ {msg:"Hello",cats:42}, {msg:"World",cats:17} ]; 
d3.select("body").selectAll("q").data(data).enter().append("q");
console.log( document.querySelector(''q'').__data__ );

Lo que verá (en la consola) es el objeto {msg:"Hello",cats:42} , ya que se asoció con el primer elemento q creado.

Si luego lo haces:

d3.selectAll(''q'').data(function(d){
  // stuff
});

el valor de d resulta ser esa propiedad __data__ . (En este punto, depende de usted asegurarse de reemplazar // stuff con código que devuelva una nueva matriz de valores).

Aquí hay otro ejemplo que muestra los datos vinculados al elemento HTML y la capacidad de volver a vincular subconjuntos de datos en los elementos inferiores:

Answer 2

La clave para entender qué está haciendo este código es reconocer que las selecciones son matrices de matrices de elementos DOM. La matriz más externa se denomina ''selección'', la matriz interna (s) se llama ''grupos'' y esos grupos contienen los elementos DOM. Puedes probar esto yendo a la consola en d3js.org y haciendo una selección como d3.selectAll (''p''), verás una matriz que contiene una matriz que contiene elementos ''p''.

En su ejemplo, cuando llama por primera vez a selectAll (''tr'') obtiene una selección con un solo grupo que contiene todos los elementos ''tr''. Entonces, cada elemento de la matrix se corresponde con cada elemento ''tr''.

Pero cuando llama a selectAll (''td'') en esa selección, la selección ya contiene un grupo de elementos ''tr''. Esta vez, cada uno de esos elementos se convertirá en un grupo de elementos ''td''. Un grupo es solo una matriz, pero también tiene una propiedad parentNode que hace referencia a la selección anterior, en este caso los elementos ''tr''.

Ahora cuando llama data(function(d) { return d; }) en esta nueva selección de elementos ''td'', d representa los datos vinculados al nodo padre de cada grupo. Entonces en el ejemplo, los ''td''s en el primer grupo estarán vinculados con la matriz [11975, 5871, 8916, 2868]. El segundo grupo de ''td''s está vinculado con [1951, 10048, 2060, 6171].

Puede leer la excelente explicación de selecciones y enlace de datos de mike bostock aquí: http://bost.ocks.org/mike/selection/

Answer 3

Use el contador i para mostrar el índice de los datos que se están usando.

var tr = d3.select("body").append("table").selectAll("tr")
.data(matrix)
.enter().append("tr") //create a row for each data entry, first index
.text(function(d, i) { return i}); // show the index i.e. d[0][] then d[1][] etc.

var td = tr.selectAll("td")
.data(function(d) { return d; })
.enter().append("td")
.style("background-color", "yellow") //show each cell
.text(function(d,i) { return i + " " + d; }); // i.e d[from the tr][0] then d[from the tr][1]...