Muy posiblemente esto repite algunos deesta pregunta tan, pero el código es demasiado complicado y el OP no ha agregado el código de la solución. Y estopregunta relacionada Ya no es replicable.

Estoy tratando de averiguar cómo combinar rotaciones y traslaciones en el orden correcto. Es posible girar alrededor del origen.como en este ejemplo. Pero cuando seguimos esto con una traducción la rotación original.se deshace.

¿Es posible estructurar esto para una correcta aplicación secuencial?

código jsfidle:

HTML:

<script src="http://d3.geotheory.co.uk/d3-transform.js"></script>

SVG:

var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300);

//Draw the Rectangle
var rect = svg.append("rect")
    .attr("x", 0).attr("y", 0)
    .attr("width", 50).attr("height", 100)
    .style("fill", "purple");

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

rect.attr('transform', rotate);

var rect2 = rect.attr('transform', rotate);
rect2.attr('transform', translate);