d3.js奇数旋转行为

时间:2012-06-11 17:52:35

标签: javascript d3.js

我正处于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”属性,则方块将完全消失。

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

3 个答案:

答案 0 :(得分:16)

旋转矩形时,还可以旋转其坐标系。因此,当您稍后沿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轴发生。

答案 1 :(得分:11)

在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/

答案 2 :(得分:0)

这是一种与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 + ")";

                })