score:18

Accepted answer

You're creating two different transformations. Assigning one doesn't add to the other. That is, in doing

rect2.attr('transform', translate);

you're undoing the first one, as it is overwritten.

To have both, add them both to one transition, e.g.

var rotateTranslate = d3.svg.transform().rotate(-45).translate(200, 100);
rect2.attr('transform', rotateTranslate);

To do this dynamically, you'll need to do something like this.

.attr("transform", function() {
    return d3.svg.transform()
        .translate(200, 100)
        .rotate(-45)
        .translate(-d3.select(this).attr("width")/2, -d3.select(this).attr("height")/2)();
}

Complete jsfiddle here.

score:21

If you're looking to do this in D3 version 4.x+ you can do it like so:

.attr('transform', 'translate(200,100)rotate(-45)')

https://bl.ocks.org/mbostock/1345853


Related Query