D3.js 动画旋转答案

【问题标题】：D3.js animate rotationD3.js 动画旋转
【发布时间】：2012-10-30 01:35:27
【问题描述】：

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

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

看来问题的根源在这里：

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

然后我像这样旋转它：

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

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

谢谢！

【问题讨论】：

标签： javascript animation rotation d3.js transform

【解决方案1】：

这是我认为发生的事情：根据the SVG spec，转换

rotate(40 150,130)

相当于：

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

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

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

【讨论】：

啊，这就是它同时平移和旋转的原因！我总是把它当作怪癖不以为然。
是的，最后的解决方案（在原点重画针）不仅最简单、最优雅，而且也是最合适的。如果在任何 GUI 工具（Flash、3D 编辑器等）中为针设置动画，就会这样做。

【解决方案2】：

这有点难以掌握（我自己并不完全理解），但 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/

【讨论】：

不错的答案 - 可能比我的容易:)。
哇，这有点烦人。谢谢你向我介绍 .attrTween()！