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

以下是我的想法：每the SVG spec，转换

rotate(40 150,130)

相当于：

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

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

这里最简单的解决方法是在原点处绘制针，将外部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/

D3.js动画旋转

2 个答案: