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/