Question

我正处于JS项目的早期阶段。到目前为止，除了一个形状的定位外，一切都很顺利。所讨论的形状是蓝绿色钻石（正方形旋转45度）。我可以在屏幕上看到方块没问题，但是当我添加：

    .attr("transform", "rotate(45)")

正方形旋转正确，但向屏幕左侧移动，如下所示：

enter image description here

我不确定导致这种情况发生的原因。如果有帮助，这里有一些产生这个结果的代码：

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
        svg
            .append("rect")
            .attr("transform", "rotate(45)")
            .attr("x", 250)
            .attr("height", w / 10)
            .attr("width", w / 10)
            .attr("fill", "teal")

注意：如果我输入“y”属性，则方块将完全消失。

造成这种情况的原因是什么？我做错了什么，我看不到？

Answer 1

旋转矩形时，还可以旋转其坐标系。因此，当您稍后沿x轴移动250时，您实际上是沿着45度轴移动250个单位 - 旋转的结果。

通常，当您为transform添加rotate属性时，应该通过此属性进行所有转换。因此，您需要使用translate而不是"x"属性。然后它看起来像这样：

svg
  .append("rect")
  .attr("transform", "translate(250, 0) rotate(45)")
  // remove this: .attr("x", 250)
  .attr("height", w / 10)
  ...

这可以为您提供我认为您正在寻找的结果。现在请注意，转换的顺序在这里很重要：如果你的变换是"rotate(45) translate(250, 0)"（即首先旋转然后翻译），你会得到与之前相同的错误结果。那是因为当你首先旋转时，你的翻译就像以前一样沿着旋转的x轴发生。

Answer 2

在SVG中，您必须设置变换原点以使其从中心旋转，例如......

.attr("transform", "rotate(45, 250, 100)");

250, 100是你的矩形的x和y位置减去它的半径。把它们放在一起它看起来像......

var svg = d3.select("body")
            .append("svg")
            .attr("width", 400)
            .attr("height", 300);
        svg
            .append("rect")
            .attr("transform", "rotate(30,"+ (diamond.x+diamond.width/2) + ","+ (diamond.y+diamond.width/2) +")")
            .attr("x", diamond.x)
            .attr("y", diamond.y)
            .attr("height", diamond.width)
            .attr("width", diamond.width)
            .attr("fill", "teal")

您可以在此处观看演示：

http://jsfiddle.net/uwM8u/

Answer 3

这是一种与Duopixel给出的答案略有不同的方法。在这里，你不是要重复X和Y的计算。在Duopixel的例子中，由于他只是引用一个结构，所以它是一个微不足道的改进。通常情况下X和Y是函数，我不想在两个地方保持记录。此方法允许您将X和Y设置为节点，然后在所述节点的中心旋转。

您可能会发现在旋转之后，您仍然希望调整最终位置，这可以通过另一个变换来完成，或者在TEXT的情况下，您可以使用dx，dy。

    svgNode.attr("transform", function (d) {

                    var w = +d3.select(this).attr("x") +  (this.getBBox().width / 2) ;
                    var h = +d3.select(this).attr("y") + (this.getBBox().height / 2);

                    return  "rotate(90," + w + "," + h + ")";

                })

d3.js奇数旋转行为

3 个答案: