javascript - D3.js 动画旋转

Question

当我尝试使用 D3.js 库正确执行旋转动画时遇到问题。问题与我要旋转元素的点有关。

这是我为表达我的意思而制作的小提琴（慢动作）：http: //jsfiddle.net/74mCb/

问题的根源似乎在这里：

.attr("transform", "rotate(-60, 150,130)");

然后我像这样旋转它：

.attr("transform", "rotate(40 150,130)");

我希望针头保持在原位（成为旋转中心），有人可以解释我做错了什么吗？

谢谢！

Answer 1

这有点难以掌握（我自己并不完全理解），但 D3 需要一些帮助来了解如何在代表您的旋转的两个字符串之间进行插值。

function turnNeedle()
{

    needle
      .transition()
      .duration(2000)
      .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString("rotate(-60, 150, 130)", "rotate(60, 150, 130)");
    }

}

d是数据，i是索引，a是属性，以防您要使此数据驱动。

http://jsfiddle.net/SHF2M/

Answer 2

这就是我认为正在发生的事情：根据SVG 规范，变换

rotate(40 150,130)

相当于：

translate(150,130) rotate(40) translate(-150, -130)

看起来 D3 正在为平移和旋转设置动画 - 的内部d3.transform表示rotate(40 150,130)是旋转组件 + 平移组件，因此两者都包含在过渡中。

这里最简单的解决方法是在原点画你的针，用外部g元素将它翻译到正确的位置，然后旋转它：

var needle = svg
  .append("g")
    .attr("class", "needle")
    .attr("transform", "translate(150 , 130)")
  .append("path")
    .attr("class", "tri")
    // your path may have been prettier
    .attr("d", "M-3 0 L0 -130 L3 0 S3 5 0 5 S-3 5 -3 0 Z")
    .attr("transform", "rotate(-60)");

然后

needle
    .transition()
    .duration(2000)
    .attr("transform", "rotate(40)");

见工作小提琴：http: //jsfiddle.net/nrabinowitz/74mCb/1/