d3.js - 与D3结合平移和旋转

Question

这很可能会重复this SO question的一部分，但是代码过于复杂，OP还没有添加解决方案代码。并且此related question不再可复制。

我试图弄清楚如何以正确的顺序组合旋转和平移。可以绕原点as in this example旋转。但是，当我们按照此翻译进行翻译时，原始旋转is undone。

是否可以针对正确的顺序应用构建此结构？

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

Answer 1

您正在创建两个不同的转换。分配一个不会添加到另一个。也就是说，在做

rect2.attr('transform', translate);

您正在撤消第一个，因为它已被覆盖。

要同时拥有两者，请将它们都添加到一个过渡中，例如

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

要动态地执行此操作，您需要执行以下操作。

.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)();
}

完成jsfiddle here。