Javascript D3.js设置旋转动画

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

这是我做的一把小提琴，用来展示我的意思（慢动作）：

问题的根源似乎在这里：

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

然后我像这样旋转它：

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

我想让针头保持在原位（作为旋转中心），有人能解释一下我做错了什么吗

---

谢谢

这有点难理解（我自己也不完全理解），但是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

是属性，以防您希望将此数据驱动

---

以下是我认为正在发生的事情：per，转换

rotate(40 150,130)

相当于：

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

看起来D3正在为平移和旋转设置动画-内部

D3。transform

表示

rotate（40 150130）

是一个旋转组件+一个平移组件，因此这两个组件都包含在转换中

这里最简单的修复方法是在原点处拔针，用外部

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)");

然后

---

看《工作小提琴》：

回答得很好-可能比我的容易：）。哇，这有点烦人。谢谢你把我介绍给。attrTween（）！啊，这就是它同时平移和旋转的原因！是的，最后一个解决方案（在原点重新画针）不仅是最简单、最优雅的，也是最合适的。如果在任何GUI工具（Flash、3D编辑器等）中设置针的动画，人们都会这么做。

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