Javascript 如何将D3数据插值/动画功能应用于动态变化的饼图

我目前在js fiddle中有一个饼图示例，可以在两个数据集之间进行静态更新（第二个数据集有更多的值）

我的目标是获得中描述的数据连接动画

当Mike使用FindReceiding和findNeighbouring函数时，显然有相当多的复杂性，这些函数显然用于使用新数据形成动画

function findNeighborArc(i, data0, data1, key) {
  var d;
  return (d = findPreceding(i, data0, data1, key)) ? {startAngle: d.endAngle, endAngle: d.endAngle}
      : (d = findFollowing(i, data0, data1, key)) ? {startAngle: d.startAngle, endAngle: d.startAngle}
      : null;
}

// Find the element in data0 that joins the highest preceding element in data1.
function findPreceding(i, data0, data1, key) {
  var m = data0.length;
  while (--i >= 0) {
    var k = key(data1[i]);
    for (var j = 0; j < m; ++j) {
      if (key(data0[j]) === k) return data0[j];
    }
  }
}

// Find the element in data0 that joins the lowest following element in data1.
function findFollowing(i, data0, data1, key) {
  var n = data1.length, m = data0.length;
  while (++i < n) {
    var k = key(data1[i]);
    for (var j = 0; j < m; ++j) {
      if (key(data0[j]) === k) return data0[j];
    }
  }
}

函数findNeighborArc（i，数据0，数据1，键）{
变量d；
返回（d=findReceiding（i，data0，data1，key））？{startAngle:d.endAngle，endAngle:d.endAngle}
：（d=findFollowing（i，data0，data1，key））？{startAngle:d.startAngle，endAngle:d.startAngle}
：null；
}
//在data0中查找与data1中最高的前一个元素联接的元素。
函数FindReceiding（i、数据0、数据1、键）{
var m=数据0.0长度；
而（--i>=0）{
var k=键（数据1[i]）；
对于（var j=0；j

然而，我真的很难将它应用到我自己的js fiddle图中，我不确定如何在两个简单的数据数组之间应用信息，因为显然关键函数并不是真正需要的

---

如果有人能给我指出正确的方向，或者能给我一些建议，我将不胜感激，因为我已经尝试过几次了，我仍在努力学习GRADPS d3及其语法。

要为添加值的饼图设置过渡动画，可以使用与相同元素数量相同的tween函数（参见示例）。唯一的区别是新圆弧的初始化——它们不是从实际位置开始，而是从0开始，使其看起来像是要进入

因此，在设置

\u current

时要考虑到这一点：

.each(function(d) {
        this._current = {data: d.data,
                         value: d.value,
                         startAngle: 0,
                         endAngle: 0};
    });

---

除此之外，代码与我上面链接的示例基本相同。完整示例。我简化了您的代码（例如，删除了附加的

g

元素）因此，核心更新代码更容易理解。

示例中的数据连接依赖于对数据中没有的项目进行分组的一些数据。您是希望进行分组，还是仅进行动画？仅使用两个数组数据集（其中一个大于另一个）进行动画。非常感谢Lars.）

.each(function(d) {
        this._current = {data: d.data,
                         value: d.value,
                         startAngle: 0,
                         endAngle: 0};
    });