d3.js - come inserire nuovi elementi di pari livello

Question

Ho un problema con l'inserimento di nuovi fratelli su elementi esistenti.

ho questa struttura

<svg> 
    <g> 
    <path class="data"></path> 
    <path class="data"></path> 
    </g> 
</svg> 

e voglio questo struttura

<svg> 
    <g> 
    <path class="data"></path> 
    <text></text> 
    <path class="data"></path> 
    <text></text> 
    </g> 
</svg> 

ma se uso le d3.js funzione di inserimento

d3.select("g").insert("text", "path.data"); 

ottengo il seguente (nonostante la selezione per nome della classe)

<svg> 
    <g> 
    <text></text> 
    <path class="data"></path> 
    <path class="data"></path> 
    </g> 
</svg> 

qualche idea?

Answer 1

Prima di tutto, vale la pena notare che il secondo argomento nella funzione di inserimento è un prima del selettore. Inoltre, le operazioni concatenate agiscono sul risultato della mano sinistra.

Così avete fatto

// select all the g elements (only 1) 
d3.select("g") 
    // For each g, insert a text element before "path.data" 
    .insert("text", "path.data"); 

Si desidera eseguire un'operazione per ogni bambino ".data", quindi è necessario selezionare ogni degli elementi ".data" ed eseguire un'azione per ciascuno di essi . Non sono del tutto sicuro di come d3 si aspetti di inserire un elemento dopo un bambino specifico. Trovo molto più facile usare l'API DOM per fare la creazione e l'inserimento degli elementi, ma usando la funzione d3.each per scorrere su una selezione.

d3.selectAll("g > .data").each(function() { 
    var t = document.createElement('text'); 
    this.parentNode.insertBefore(t, this.nextSibling);  
});​