d3.js奇数旋转行为

Question

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

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

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

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

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个单位 - 旋转的结果。

通常，当您为rotate引入transform属性时，应该通过此属性执行所有变换。 因此，您需要使用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 + ")";

                })