Verstehen, wie D3.js Daten an Knoten bindet

Ich bin durch die Lektüre D3.js Dokumentation, und finde es schwer zu verstehen, die Auswahl.data Methode aus der Dokumentation.

Dies ist der Beispiel-code 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 die meisten, aber was ist Los mit den .data(function(d) { return d; }) Abschnitt der var td Aussage?

Meine beste Vermutung ist wie folgt:

  • Die var tr Anweisung gebunden hat, um eine vier-element-array für jeden Knoten tr
  • Die var td - Anweisung verwendet dann, dass die vier-element-array als Daten, die irgendwie

Aber wie funktioniert .data(function(d) { return d; }) eigentlich an diese Daten kommen, und was braucht es dafür?

InformationsquelleAutor der Frage Richard | 2012-02-28

  1. 63

    Wenn Sie schreiben:

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

    D3 erzeugt eine Reihe von <foo> Elementen, eine für jeden Eintrag im array. Wichtiger ist, dass es auch Mitarbeiter die Daten für jeden Eintrag in dem array mit DOM-element, als __data__ Eigenschaft.

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

    Dem, was Sie sehen (in der Konsole) ist das Objekt {msg:"Hello",cats:42}da war das verbunden mit dem ersten erstellt q element.

    Wenn Sie später tun:

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

    den Wert d stellt sich heraus, dass __data__ Eigenschaft. (An diesem Punkt ist es bis zu Ihnen, um sicherzustellen, dass Sie ersetzen //stuff mit code, der gibt ein neues array von Werten.)

    Hier ist ein weiteres Beispiel zeigt die Daten an das HTML-element und die Fähigkeit, sich neu zu binden, Teilmengen von Daten auf untere Elemente:

      Verstehen, wie D3.js Daten an Knoten bindet

    InformationsquelleAutor der Antwort Phrogz

  2. 16

    Den Schlüssel zum Verständnis dessen, was dieser code tut, ist zu erkennen, dass die Auswahl arrays von arrays von DOM-Elementen. Die äußeren-die meisten-array genannt wird, eine 'Auswahl', die inner-array(s) werden als "Gruppen" und denen, die Gruppen enthalten, die DOM-Elemente. Sie können dies testen, indem Sie in der Konsole auf d3js.org und machen eine Auswahl wie d3.selectAll ("p"), werden Sie sehen, ein array, ein array mit 'p' - Elemente.

    In deinem Beispiel beim ersten Aufruf selectAll('tr') erhalten Sie eine Auswahl mit einer einzigen Gruppe, die enthält alle die 'tr' - Elemente. Dann ist jedes element von matrix ist abgestimmt auf jedem 'tr' - element.

    Aber, wenn Sie anrufen selectAll('td') auf, die Auswahl, die Auswahl enthält bereits eine Gruppe von 'tr' - Elemente. Diese Zeit, die jedes dieser Elemente wird jeweils eine Gruppe des 'td' - Elemente. Eine Gruppe ist nur ein array, sondern es hat auch eine parentNode-Eigenschaft, die auf die alte Auswahl, in diesem Fall die 'tr' - Elemente.

    Wenn Sie jetzt anrufen data(function(d) { return d; }) auf diese neue Auswahl 'td' - Elemente d stellt die Daten gebunden, die für jede Gruppe der übergeordnete Knoten. Also im Beispiel, der 'td' s in der ersten Gruppe gebunden sein wird mit dem array [11975, 5871, 8916, 2868]. Die zweite Gruppe der " td ' s gebunden sind, mit [ 1951, 10048, 2060, 6171].

    Können Sie Lesen, mike bostock eigene hervorragende Erklärung von Selektionen und Daten-Bindung hier: http://bost.ocks.org/mike/selection/

    InformationsquelleAutor der Antwort allen kim

  3. 1

    Die counter - ich zeigen den index von Daten verwendet wird.

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

    InformationsquelleAutor der Antwort Mortis

Schreibe einen Kommentar