d3は、私はD3に次のように作成したいよ

Question

を入れ子にすることなく、追加：

rectangles 
    .selectAll('g') 
    .data(data) 
    .enter() 
    .append('g') 
    .append('rect') 
    .addClass('rect1') 
    .append('rect') 
    .addClass('rect2') 

それがこれをやっているしかし：

<g> 
    <rect class="rect1"> 
     <rect class="rect2"></rect> 
    </rect> 
</g> 

を私がやろうとしている

<g> 
    <rect class="rect1"></rect> 
    <rect class="rect2"></rect> 
</g> 

グループごとに複数の矩形を同じレベルで挿入するにはどうすればよいですか？

Answer 1

このようなものが必要です。複数の子を作成できるように、g要素への参照を保持する必要があります。

g = rectangles 
    .selectAll('g') 
    .data(data) 
    .enter() 
    .append('g') 

g.append('rect') 
    .addClass('rect1') 

g.append('rect') 
    .addClass('rect2') 

Answer 2

最初<g>を追加して、動的に各矩形のクラスを設定し、データのそれぞれに対して1つの長方形を追加することができます。例：

var svg = d3.select("svg"); 
var rectangles = svg 
    .append('g') 
    .selectAll('rect') 
    .data([0, 1]) 
    .enter() 
    .append('rect') 
    .attr('class', function(d){ return 'rect' + (d+1); });