将translate和rotate与D3组合 [英] Combining translate and rotate with D3

问题描述

很可能会重复一些这个SO问题 ，但是代码过于复杂，OP没有添加解决方案代码。而且此相关问题不再可复制。

Quite possibly this repeats some of this SO question, but the code is overly-complicated and the OP hasn't added solution code. And this related question is no longer replicable.

我想弄清楚如何以正确的顺序组合旋转和翻译。可以围绕原点旋转，如本示例所示。但是，当我们使用翻译跟踪原始旋转已撤消。

I'm trying to figure out how to combine rotations and translations in the right order. It's possible to rotate around the origin as in this example. But when we follow this with a translation the original rotation is undone.

是否可以将此结构化为正确的顺序应用程序？

Is it possible to structure this for correct sequential application?

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

推荐答案

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

You're creating two different transformantions. Assigning one doesn't add to the other. That is, in doing

rect2.attr('transform', translate);

您要撤消第一个，因为它被覆盖。

you're undoing the first one, as it is overwritten.

要同时有两个，请将它们添加到一个转换中，例如

To have both, add them both to one transition, e.g.

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

要动态地做这件事，你需要这样做。

To do this dynamically, you'll need to do something like this.

.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 此处。

Complete jsfiddle here.

这篇关于将translate和rotate与D3组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！