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) + ")";
});