Verstehen, wie D3.js Daten an Knoten bindet

Ich lese die Dokumentation zu D3.js durch und finde es schwierig, die selection.dataMethode aus der Dokumentation zu verstehen .

Dies ist der Beispielcode in der Dokumentation:

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

Ich verstehe das meiste davon, aber was ist mit dem .data(function(d) { return d; })Abschnitt der var tdErklärung los?

Meine beste Vermutung ist wie folgt:

• Die var trAnweisung hat ein Array mit vier Elementen an jeden tr-Knoten gebunden
• Die var tdAnweisung verwendet dann irgendwie dieses Array mit vier Elementen als Daten

Aber wie kommt man .data(function(d) { return d; })tatsächlich an diese Daten und was gibt sie zurück?

Wenn Sie schreiben:

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

D3 erstellt eine Reihe von <foo>Elementen, eines für jeden Eintrag im Array. Noch wichtiger ist, dass die Daten für jeden Eintrag im Array diesem DOM-Element als __data__Eigenschaft zugeordnet werden.

Versuche dies:

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

Was Sie (in der Konsole) sehen, ist das Objekt {msg:"Hello",cats:42}, da es dem zuerst erstellten qElement zugeordnet wurde.

Wenn Sie später tun:

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

Der Wert von dstellt sich als diese __data__Eigenschaft heraus. (An diesem Punkt müssen Sie sicherstellen, dass Sie durch // stuffCode ersetzen , der ein neues Array von Werten zurückgibt.)

Hier ist ein weiteres Beispiel, das die an das HTML-Element gebundenen Daten und die Möglichkeit zeigt, Teilmengen von Daten auf niedrigeren Elementen neu zu binden:

Der Schlüssel zum Verständnis der Funktionsweise dieses Codes besteht darin, zu erkennen, dass Auswahlen Arrays von Arrays von DOM-Elementen sind. Das äußerste Array wird als "Auswahl" bezeichnet, die inneren Arrays werden als "Gruppen" bezeichnet und diese Gruppen enthalten die DOM-Elemente. Sie können dies testen, indem Sie in die Konsole auf d3js.org gehen und eine Auswahl wie d3.selectAll ('p') treffen. Sie sehen ein Array, das ein Array enthält, das 'p'-Elemente enthält.

In Ihrem Beispiel erhalten Sie beim ersten Aufruf von selectAll ('tr') eine Auswahl mit einer einzelnen Gruppe, die alle 'tr'-Elemente enthält. Dann wird jedes Element von matrixmit jedem 'tr'-Element abgeglichen.

Wenn Sie jedoch selectAll ('td') für diese Auswahl aufrufen, enthält die Auswahl bereits eine Gruppe von 'tr'-Elementen. Dieses Mal wird jedes dieser Elemente zu einer Gruppe von 'td'-Elementen. Eine Gruppe ist nur ein Array, hat aber auch eine parentNode-Eigenschaft, die auf die alte Auswahl verweist, in diesem Fall auf die 'tr'-Elemente.

Wenn Sie nun data(function(d) { return d; })diese neue Auswahl von 'td'-Elementen aufrufen , werden ddie Daten dargestellt, die an den übergeordneten Knoten jeder Gruppe gebunden sind. Im Beispiel werden die 'tds in der ersten Gruppe an das Array gebunden [11975, 5871, 8916, 2868]. Die zweite Gruppe von 'td's ist gebunden an [1951, 10048, 2060, 6171].

Hier können Sie die exzellente Erklärung von mike bostock zur Auswahl und Datenbindung lesen: http://bost.ocks.org/mike/selection/

Verwenden Sie den Zähler i , um den Index der verwendeten Daten anzuzeigen.

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