带过渡的线性/增量旋转动画

Question

我正在尝试使用D3 中的transform 属性和transition 方法使SVG 形状旋转。这是包含示例的 jsfiddle：http://jsfiddle.net/TJd2a/

我使用两个按钮，左和右，通过增加其角度 45 或 -45 度来旋转矩形。当形状达到 180 度或 -180 度时，过渡以相反的方式旋转形状，而不是线性移动到下一个角度。使用控制台日志记录，我发现我的代码生成的角度没有任何问题。这似乎是 D3 处理转换的方式，因为生成的 XML 显示的角度与当前的角度不同（例如，在 225 度时，D3 将矩形旋转 -135）。

根据我从文档中阅读和理解的内容，我需要使用自定义补间，但我不确定从哪里开始使用自定义补间，因为我找不到任何特定示例或类似示例来帮助我理解它是如何工作的。

Answer 1

正确；您可以使用自定义补间来更改插值器。 D3 有一个特殊的interpolator for transforms，但在你的情况下它没有做正确的事情。 （我认为这可能是一个应该修复的错误，所以我提交了issue 661。）下面是一个使用interpolateString 的示例：

d3.select("rect").transition().attrTween("transform", function(d) {
  return d3.interpolateString(
    "rotate("+ d.a +")",
    "rotate(" + (d.a += 45) + ")"
  );
});