D3.js - come funzionano le selezioni - Servono chiarimenti sull'articolo di Mike

Question

In http://bost.ocks.org/mike/selection/, Mike parla dell'applicazione delle funzioni sulle selezioni.

Quando si utilizza una funzione per definire uno stile selection.attr o selection.style, la funzione viene chiamata per ogni elemento; la principale differenza con il raggruppamento è che il secondo argomento della funzione (i) è l'indice all'interno del gruppo piuttosto che l'indice di selezione interna.

Questo potrebbe essere semplice, ma per qualche motivo, non riesco a capire completamente questo punto. Qualcuno dovrebbe essere così gentile da spiegare questo con un esempio.

Answer 1

la differenza principale con il raggruppamento è che il secondo -h'allo funzione (i) è l'indice entro i gruppi anziché dell'indice entro selezione.

Ricordare che l'indice è passato a tutte le funzioni attr, style, ecc in d3?

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

Quindi, quando si fa un selectAll, l'indice parte da 0 per ogni gruppo.

Quindi, se si fa due selectAlls incatenati dove i primi livelli (gruppo) sono le righe (TR) e il secondo livello (bambino) sono cellule (TD), che ci si hanno le seguenti passato come indici per un tavolo 2 righe x 3 celle

0, 1, 2, 0, 1, 2 

invece di

0, 1, 3, 4, 5, 6 

che è quello che ci si aspetta quando si seleziona solo 6 nodi con un unico selectAll .

---

Il seguente frammento di codice illustra questo

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>

---

La prima animazione sulla pagina si è collegato al (http://bost.ocks.org/mike/selection/) illustra questo abbastanza bene - ecco una marcata versione dello stesso