如何將元素添加到嵌套圖層

Question

我正在嘗試在一個嵌套圖層中添加一個矩形圖表，用於放置svg堆疊圖表。

首先我有以下幾點：

​​

其中在DOM渲染<g class="someclass"><g></g></g>

我會那麼喜歡做的事，就是爲dataPointValues集合中的每個數據點和rect和text元素。

我試圖

layers.selectAll（ 'g.layer'） 。數據（函數（d）{ 返回d.dataPointValues; }） 。進入（） .append（'RECT 「）;

我知道是錯的，因爲我結束了

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

我要的是

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

所以附加的第二級層的時候，我怎麼再添加一個新的水平rect元素？

這可能看起來像嵌套，但我想每個數據點層，因爲每個數據點可能有一個或多個元素代表它。

謝謝

Answer 1

你非常接近得到你想要的。唯一缺少的是爲layers使用另一個變量。下面是摘錄：

首先，創建外羣體，這正是像你一樣：

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

然後，而不是再次使用layers，我們創建另一個變量：

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

這將創建組內的組。最後，我們使用innerLayers要追加rects：

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

這樣做的方式，你有你想要的東西：

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