结合平移和旋转D3

Question

很可能这会重复一些SO问题,但代码过于复杂,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);

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 .

Answer 2

如果你想在D3版本4.x +中这样做,你可以这样做:

.attr('transform', 'translate(200,100)rotate(-45)')

https://bl.ocks.org/mbostock/1345853