D3.js - wie Auswahlen funktionieren - Benötigen Sie eine Klarstellung zu Mikes Artikel

Question

In http://bost.ocks.org/mike/selection/ spricht Mike über das Anwenden von Funktionen auf Auswahlen.

Wenn Sie eine Funktion verwenden, um eine selection.attr oder selection.style zu definieren, wird die Funktion für jedes Element aufgerufen; Der Hauptunterschied zur Gruppierung besteht darin, dass das zweite Argument für Ihre Funktion (i) der Index innerhalb der Gruppe und nicht der Index innerhalb der Auswahl ist.

Dies könnte einfach sein, aber aus irgendeinem Grund kann ich diesen Punkt nicht vollständig verstehen. Würde jemand freundlich genug sein, dies mit einem Beispiel zu erklären?

Answer 1

Der Hauptunterschied mit der Gruppierung ist, dass das zweite Argument zu Ihrer Funktion (i) der in-Gruppenindex statt dem within-Auswahlindex.

Erinnern Sie sich an den Index, der an irgendwelche Attribute attr, style usw. in d3 übergeben wurde?

... 
.attr('something', function(d, index) { 
    // major gymnastics with d and index 
} 

Also, wenn Sie einen selectAll tun, beginnt der Index von 0 für jede Gruppe.

Also, wenn Sie zwei gekettet selectAlls tun, wo die ersten (Gruppe) -Spiegel sind Zeilen (tr) und die zweite (Kind) -Spiegel sind Zellen (td), würde haben Sie die folgenden als Indizes übergeben für

0, 1, 2, 0, 1, 2 

statt

0, 1, 3, 4, 5, 6 

2 Reihen x 3 Tabellenzellen, die ist, was man erwarten würde, wenn man nur 6 Knoten mit einem einzigen selectAll wählen.

---

Der folgende Code-Snippet veranschaulicht dies

d3.selectAll("#a tr").selectAll("td").text(function(d, index) { 
 
     return index; 
 
    }) 
 

 
    d3.selectAll("#b td").text(function(d, index) { 
 
     return index; 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
Grouped cells (i.e. 2 selectAll) 
 
<table id="a"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 

 
Ungrouped cells (i.e. 1 selectAll) 
 
<table id="b"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

---

Die erste Animation auf der Seite, die Sie (http://bost.ocks.org/mike/selection/) verknüpfen diese ziemlich gut illustriert - hier ist ein deutlicher up Version desselben