d3で複数のsvgコンテナ内に複数の矩形をネストしますか？

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とコンテナクラスを表示しています。

私はいくつかのことを試みましたが、それを解読しているように見えませんでした。誰かが正しい方向に向けることを望んでいましたか？

おかげ

Answer 1

あなたがにsvgを追加して、あなたも'g'に矩形を追加'g'要素を持っています。作成するsvg要素にrectを追加します。このような何か：

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