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

通常,当您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/