Wie man Elemente an eine geschachtelte Ebene anfügt

Question

Ich versuche, ein Rect in einer verschachtelten Ebene für ein Svg-gestapeltes Diagramm anzuhängen, das ich zusammenstelle.

Zunächst ich folgendes haben:

layers = svg.selectAll('g.layer') 
    .data(stacked, function(d) { 
     return d.dataPointLegend; 
    }) 
    .enter() 
    .append('g') 
    .attr('class', function(d) { 
     return d.dataPointLegend; 
    }); 

layers.selectAll('g.layer') 
    .data(function(d) { 
     return d.dataPointValues; 
    }) 
    .enter() 
    .append('g'); 

Welche <g class="someclass"><g></g></g> im DOM

Was für jeden Datenpunkt in der dataPointValues Sammlung ist dann möchte ich tun macht und ein rect und text Element.

I

layers.selectAll ('g.layer') .data (function (d) { return d.dataPointValues; }) versucht haben .enter() .append ('rect ");

Was ich weiß, ist falsch, da ich mit

<g class="someclass"><g></g><rect></rect></g> 

am Ende Was ich will, ist

<g class="someclass"><g><rect></rect></g></g> 

Also, wenn die zweite Ebene Schicht anhängen, wie füge ich dann das nächste Level rect Element ?

Dies mag wie über Verschachtelung aussehen, aber ich möchte eine Schicht pro Datenpunkt, da jeder Datenpunkt ein oder mehrere Elemente haben kann, die es darstellen.

Dank

Answer 1

Sie sind sehr nah, um zu bekommen, was Sie wollen. Das einzige, was fehlt, ist eine andere Variable für layers zu verwenden. Hier ist der Code-Schnipsel:

Zuerst für die äußeren Gruppen zu schaffen, es ist genau so, wie du getan hast:

var layers = svg.selectAll("g.layer") 
     .data(/*whatever*/) 
     .enter() 
     .append("g"); 

Dann anstelle von layers wieder schaffen wir eine weitere Variable:

var innerLayers = layers.selectAll("g.layer") 
     .data(/*whatever*/) 
     .enter() 
     .append("g"); 

Dies erstellt die Gruppen innerhalb der Gruppen. Und schließlich verwenden wir innerLayers die Rects anhängen:

innerLayers.selectAll(".rects") 
     .data(/*whatever*/) 
     .enter() 
     .append("rect"); 

diese Art und Weise haben Sie, was Sie wollen:

<g class="someclass"><g><rect></rect></g></g>