Verstehen, wie D3.js Daten an Knoten bindet

74

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?

javascript d3.js html-table Richard
quelle
3
Es kann hilfreich sein, dieses Tutorial durchzulesen .
Phrogz
Vielen Dank! Ich verstehe jetzt, was mit den .enter()Teilen des Codes los ist . Ich denke, ich muss möglicherweise auf das zukünftige Tutorial warten, um zu verstehen, was mit der Datentastenfunktion los ist.
Richard
4
Ich hoffe, bald ein neues Tutorial zu schreiben, das die Schlüsselfunktion und auch hierarchische Auswahlen (selectAll.selectAll) behandelt.
mbostock

Antworten:

68

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:

  Keine Beschreibung

Phrogz
quelle
20

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/

Allen Kim
quelle
Vielen Dank! Ich denke, diese Antwort ist sehr klar, kommt direkt auf den Punkt; mehr als andere Antwort (die auch nützliche Informationen bietet, keine Beleidigung)
Drähte
Danke an den Link Kim. Das ist detailliert genug für mich zu verstehen. Weiter stupste mich das zu bost.ocks.org/mike/nest
VivekDev
1
Während Phrogz 'Kommentar einige ausgezeichnete Informationen enthält und sehr nützlich ist, erklärt diese Antwort klar die genaue gestellte Frage. Ich hatte die gleiche Verwirrung und es klickte, als ich den Teil sah, der return d;den übergeordneten Knoten zurückgibt . Die Verwirrung ist, dass bestimmte Methoden auf verschiedenen Hierarchieebenen arbeiten. ZB attrarbeitet im Gegensatz zu den einzelnen Elementen data. Vielen Dank!
Mike Williamson
1

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