d3.js - So fügen Sie neue Geschwisterelemente ein

Question

Ich habe ein Problem beim Einfügen neuer Geschwister in vorhandene Elemente.

Ich habe diese Struktur

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

und wollen diese Struktur

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

aber wenn ich die d3.js verwenden einfügen Funktion

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

i folgendes erhalten (trotz der Auswahl nach Klassennamen)

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

irgendwelche ideen?

Answer 1

Vor allem ist es erwähnenswert, dass das zweite Argument in der Einfügefunktion ein vor Selektor ist. Darüber hinaus wirken verkettete Operationen auf das Ergebnis der linken Hand.

So haben Sie

getan

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

Sie wollen eine Operation für jedes Kind „.data“ durchzuführen, so dass Sie jede der „.data“ Elemente auswählen müssen und eine Aktion für jeden von ihnen durchführen . Ich bin nicht ganz sicher, wie d3 erwartet, dass Sie ein Element nach einem bestimmten Kind einfügen. Ich finde es viel einfacher, die DOM-API zu verwenden, um die Elemente zu erstellen und einzufügen, aber die d3.each-Funktion zu verwenden, um über eine Auswahl zu iterieren.

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