Perché d3.select() restituisce l'array dell'array?

Question

Recentemente ho iniziato ad usare d3.js di scrivere alcuni script per manipolare SVG. Quindi la maggior parte delle volte rimando alla documentazione di d3 e trovo la soluzione. Tuttavia non riesco a capire perché la funzione d3.select restituisca array di matrici. Per esempio diciamo che ho un elemento SVG e se lo faccio d3.select("svg"), restituisce [[svg]] quindi devo fare d3.select("svg")[0]. La documentazione dice

Una sfumatura è che le selezioni sono raggruppati: anziché una matrice unidimensionale, ogni selezione è un array di array di elementi. Ciò mantiene la struttura gerarchica delle sottoselezioni

Quindi dice che possiamo ignorarlo la maggior parte del tempo.

1. Perché restituisce array di array?
2. Cosa

Questo conserva la struttura gerarchica della sottoselezioni

dire?

Grazie in anticipo.

Answer 1

Non dovrebbe essere necessario sapere o di assistenza come l'oggetto d3.select rendimenti è strutturato internamente. Tutto quello che devi sapere è quali metodi sono accessibili in quell'oggetto, che è ciò che descrive la documentazione.

Diciamo che avete questo documento:

<div> 
    <span>1</span> 
    <span>2</span> 
</div> 
<div> 
    <span>3</span> 
    <span>4</span> 
</div> 

Se si seleziona tutti <div> elementi con d3.selectAll

var div = d3.selectAll("div"); 

il div è un oggetto selezione d3 di dimensione 2, uno per ogni elemento <div> nel documento.

Ma se ora si genera una sottoselezione da questo oggetto selezione

var span = div.selectAll("span"); 

una ricerca è fatta per gli elementi all'interno di ogni elemento corrispondente nella selezione div, e la struttura è conservato - vale a dire, la selezione sarà span contengono lo stesso numero di elementi della selezione div su cui era basato e ognuno di questi sarà costituito da una selezione di elementi trovati in quell'elemento.

Quindi, in questo caso, span conterrà due selezioni (primo e secondo <div><div>), ognuno dei quali conterrà due elementi (1 e 2 nella prima, 3 e 4 nel secondo).

Per quanto riguarda select, è lo stesso che selectAll tranne che si ferma dopo aver trovato una corrispondenza; il suo ritorno è strutturato esattamente allo stesso modo, comunque.

Demo