Javascript d3.js圆弧段动画问题

我正在尝试用d3.js创建一个动画圆弧段。我让弧线和过渡工作，但当动画运行时，弧线被扭曲，我不知道为什么

以下是我到目前为止的情况：

---

正如Richard所解释的，您正在先前计算的SVG路径字符串和新计算的字符串之间进行插值——这将做一些奇怪的事情——而不是在先前角度和新角度之间进行插值，这正是您想要的

您需要使用

arc

函数对输入进行插值，并为每个插值映射到SVG路径字符串。要做到这一点，您需要将之前的每个数据存储在某个位置，并使用自定义的tweening函数，您可以在我前面的注释中的示例中找到该函数

一,。记住以前的基准（最初）：

二,。定义自定义粗花呢功能：

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0); // Remember previous datum for next time
  return function(t) {
    return arc(i(t));
  };
}

三,。使用它：

.attrTween("d", arcTween)

---

它看起来是这样的：

你看到了吗？我认为D3为你在每一组点之间插值，所以通过沿直线移动点，而不是像你希望的那样沿径向移动点，在每个状态之间设置动画。要实现这一点，需要指定一个tweening函数来指定所需的过渡动画。链接到的示例Lars应该向您展示您需要的内容。奇怪的是，链接的示例引用了一个从未提供过的函数（

pieTween

）。看看这些可能更有用的例子：，和。另一个问题是它将间隔设置为2秒。动画需要2.5秒。因此，应修改过渡时间，使其低于新数据到达时间。

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0); // Remember previous datum for next time
  return function(t) {
    return arc(i(t));
  };
}

.attrTween("d", arcTween)