Сочетание перевести и повернуть с D3

Вполне возможно, что это повторяет некоторые изэтот ТАК вопрос, но код слишком сложный, и OP не добавил код решения. И этосвязанный вопрос больше не воспроизводится.

Я пытаюсь понять, как объединить вращения и переводы в правильном порядке. Можно вращать вокруг начала координаткак в этом примере, Но когда мы следуем этому с переводом, оригинальное вращениеотменено.

Можно ли структурировать это для правильного последовательного применения?

код 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);

Ответы на вопрос(2)

Ваш ответ на вопрос