Möglicherweise wiederholt dies einige vondiese SO Frage, aber der Code ist zu kompliziert und das OP hat keinen Lösungscode hinzugefügt. Und dasverwandte Frage ist nicht mehr replizierbar.

Ich versuche herauszufinden, wie Rotationen und Übersetzungen in der richtigen Reihenfolge kombiniert werden können. Es ist möglich, um den Ursprung zu drehenwie in diesem Beispiel. Aber wenn wir dem mit einer Übersetzung folgen, dann die ursprüngliche Drehungwird rückgängig gemacht.

Ist es möglich, dies für eine korrekte sequentielle Anwendung zu strukturieren?

jsfidle code:

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