D3変換が複数に適用されない<g>要素

Question

以下のコードが機能しない理由はありますか？私は、それぞれ異なるy座標を持つ3つのグループを作成しようとしています。しかし、私がそれを好きになるとすぐに、変換はまったく適用されず、すべての<g>は0,0でオーバーラップしています。

関数を明示的なx、y座標に変換すると、正しく変換されます。

var dataset = [{ 
      data: 100 
     }, { 
      data: 200 
     }, { 
      data: 300 
     }]; 

var groups = svg.selectAll("g") 
       .data(dataset) 
       .enter() 
       .append("g") 
       .attr("transform", "translate(0" + function(d,i) {return i * 100} + ")"); 

Answer 1

あなたは、関数の中で全体translate値を返す必要があります：

.attr("transform", function (d, i){ 
    return "translate(0," + (i * 100) + ")"; 
});