用d3在多個svg容器中嵌套多個rects？

Question

我試圖在g元素中創建的每個svg元素中嵌套一個單獨的矩形，但似乎無法使其工作。

這是我的代碼+ Plnk;

Plunker

var bar = g.selectAll(".barContainer") 
    .data(thisData.labels) 
    .enter() 

    bar 
    .append("svg") 
    .attr("class", "barContainer") 

    bar 
    .insert('rect') 
    .attr('width', function(d) { 
     console.log(d) 
     return d.value 
    }) 
    .attr('height', 20) 
    .attr('x', 0) 
    .attr('y', 0) 

目前DOM顯示的是在同一水平上，在那裏，因爲我想巢每個容器內的RECT的RECT和容器類。

我試過幾件事，但似乎無法破解它，我希望有人能指出我在正確的方向嗎？

感謝

Answer 1

你有你追加svg來，然後你還追加RECT到'g'一個'g'元素。您想要將rect附加到您創建的svg元素上。事情是這樣的：

var bar = g.selectAll(".barContainer") 
    .data(thisData.labels) 
    .enter() 

    var barRectSVG = bar 
    .append("svg") 
    .attr("class", "barContainer") 

    barRectSVG 
    .insert('rect') 
    .attr('width', function(d) { 
     console.log(d) 
     return d.value 
    }) 
    .attr('height', 20) 
    .attr('x', 0) 
    .attr('y', 0) 

更新plnkr：http://plnkr.co/edit/WYbjT7ekjUuopzs0H9Pi?p=preview