javascript - 旋转与过渡

Question

如前面的问题所述(例如 d3.js Odd Rotation Behavior )，当您想要在其位置旋转 SVG 对象时，您应该使用

.attr('transform','rotate(45,100,100)')

其中第一个数字是旋转度数，另外两个数字是旋转原点的坐标。

这里的问题是我想在过渡中执行旋转:

.transition()
.attr('transform', 'rotate(45,100,100)')
.duration(300)

我得到了一个奇怪的行为，我可以在预期的轮换之前看到翻译。您可以在此处查看结果:http://jsfiddle.net/uwM8u/121/

有没有更好的方法来获得这个？

Answer 1

执行此操作的 D3 方法是使用 custom tween function ，在本例中是一个简单的字符串插值:

.attrTween("transform", function() {
  return d3.interpolateString(d3.select(this).attr("transform"),
      "rotate(" + (rotation+=45) + "," +
        (diamond.x+diamond.width/2) + "," +
        (diamond.y+diamond.width/2) + ")");
})

完整演示 here .