d3.js - jak wstawić nowe elementy rodzeństwa

Question

Mam problem z wstawieniem nowych rodzeństwa do istniejących elementów.

mam tej struktury

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

i chcą tę strukturę

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

ale jeśli używam d3.js funkcja wstawić

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

pojawia się następujący (mimo wybierając według nazwy klasy)

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

jakieś pomysły?

Answer 1

Przede wszystkim warto zauważyć, że drugim argumentem w funkcji wstawiania jest przed selektorem. Co więcej, operacje łańcuchowe działają na wynik po lewej stronie.

Więc zrobili

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

Chcesz wykonać operację dla każdego dziecka „.data”, więc trzeba wybrać każdy z „.data” elementów i wykonać działanie dla każdego z nich . Nie jestem do końca pewien, w jaki sposób d3 oczekuje wstawienia elementu po określonym potomku. Znacznie łatwiej jest używać DOM API do tworzenia i wstawiania elementów, ale przy użyciu funkcji d3.each do iterowania nad wyborem.

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