用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