入れ子になったレイヤーに要素を追加する方法

Question

私は入れているsvg積み上げグラフのために入れ子になったレイヤーの中にrectを追加しようとしています。私は、次のしていると起動するには

：

私は、やりたい何DOM

で<g class="someclass"><g></g></g>をレンダリング ​​

を、dataPointValuesコレクションとrectに各データポイントのためのものであり、 text要素。

Iは

layers.selectAll（ 'g.layer'） .DATA試みた（関数（D）{ 戻りd.dataPointValuesと、 }） .enter（） .append（ 'RECT '）;私は私が第2のレベルの層を追加するとき私は何をしたいことは

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

だから、どのように私は、次のレベルrect要素を追加しないさ

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

で終わるので、間違っている知っている

？

これはオーバーネストのように見えるかもしれませんが、データポイントごとに1つのレイヤーが必要です。各データポイントには1つまたは複数の要素があるためです。

ありがとうございました

Answer 1

あなたが望むものを手に入れるのに非常に近いです。欠けているのは、layersの別の変数を使用することだけです。あなたが行ったように、それはまさに、

まず、外側のグループを作成する：ここでは、スニペットです

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

：

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

その後、代わりに再びlayersを使用して、我々は別の変数を作成しますこれにより、グループ内のグループが作成されます。そして、最後に、我々はrectsを追加するinnerLayersを使用します。

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

がこのように行う、あなたが望むものを持っている：

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