D3轉換不適用於多個<g>元素

Question

你知道爲什麼下面的代碼不起作用嗎？我試圖創建3個不同的y座標爲每個組。但是，只要我這樣做，轉換就根本不適用，所有<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) + ")"; 
});