CODEWITHSUNDEEP
javascriptd3.js
Zenon
Zenon

Reputation: 91

D3 transformation not applied to multiple <g> elements

Do you have any idea why the below code doesn't work? I'm trying to create 3 groups with different y coordinate for each. But as soon as I do it like that the transformation is not applied at all and all the <g>s are overlapping at 0,0.

If I change the function to explicit x,y coordinates in transformation it works correctly. 

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

Upvotes: 0

Views: 53

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102219

You have to return the whole translate value in a function:

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

Upvotes: 2

Related Questions