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)

Complete jsfiddle here.


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)')

Related Query