Comprendre comment D3.js lie les données aux nœuds

Question

Je suis en train de lire à travers les D3.js de la documentation, et je suis mal à comprendre l' selection.data méthode de la documentation.

C'est l'exemple de code fourni dans la documentation:

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; });

Je comprends la plupart de ce, mais ce qui se passe avec l' .data(function(d) { return d; }) de la section de l' var td déclaration?

Ma meilleure supposition est comme suit:

• L' var tr déclaration a lié un quatre-élément de tableau à chaque nœud de tr
• L' var td déclaration puis utilise que quatre éléments du tableau comme ses données, en quelque sorte

Mais comment fait - .data(function(d) { return d; }) réellement obtenir que les données, et que fait-il de retour?

Answer 1

Lorsque vous écrivez:

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

D3 crée un groupe de <foo> éléments, un pour chaque entrée dans le tableau. Plus important encore, il associe également les données pour chaque entrée dans le tableau avec celui de l'élément DOM, en __data__ de la propriété.

Essayez ceci:

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__ );

Ce que vous voyez (dans la console) est l'objet {msg:"Hello",cats:42}, depuis qu'a été associée à la première créée q élément.

Si plus tard vous faire:

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

la valeur de d s'avère être qu' __data__ de la propriété. (À ce stade, il est à vous de vous assurer que vous remplacez // stuff avec le code qui renvoie un nouveau tableau de valeurs).

Voici un autre exemple montrant les données liées à l'élément HTML et la capacité de re-lier les sous-ensembles de données sur les éléments inférieurs:

 

Answer 2

La clé de la compréhension de ce que ce code est en train de faire est de reconnaître que les sélections sont des tableaux de tableaux d'éléments DOM. L'extérieur la plupart du tableau est appelé une "sélection", à l'intérieur de la matrice de(s) sont appelés "groupes" et ces groupes contiennent les éléments du DOM. Vous pouvez tester cela en allant dans la console d3js.org et faire une sélection comme d3.selectAll('p'), vous verrez un tableau contenant un tableau contenant 'p' éléments.

Dans votre exemple, lors du premier appel selectAll('tr'), vous obtenez une sélection avec un seul groupe qui contient tous les 'tr' éléments. Ensuite, chaque élément de l' matrix est adaptée à chaque 'tr' élément.

Mais lorsque vous appelez selectAll('td') sur la sélection, la sélection contient déjà un groupe de 'tr' éléments. Cette fois, chacun de ces éléments permettra à chacun de devenir un groupe de 'td' éléments. Un groupe est juste un tableau, mais il a aussi un parentNode bien que les références de l'ancienne sélection, dans ce cas, le 'tr' éléments.

Maintenant, lorsque vous appelez data(function(d) { return d; }) sur cette nouvelle sélection de 'td' éléments, d représente les données liées à chaque groupe du nœud parent. Ainsi, dans l'exemple, le td est dans le premier groupe sera lié avec le tableau [11975, 5871, 8916, 2868]. Le deuxième groupe de " la td sont liés avec [ 1951, 10048, 2060, 6171].

Vous pouvez lire mike bostock est excellente explication de sélections et de la liaison de données ici: http://bost.ocks.org/mike/selection/