Javascript 甜甜圈图表未使用新值更新

我有一个甜甜圈图表，它是根据数组中对象的值呈现的。初始渲染工作正常，但我似乎无法让更新正常工作——我更改了数据，但它不会在视觉上进行更新。我举了一个例子：

这是我目前的代码：

我的代码中的相关更新部分：

$scope.dataset = [
    metric: 'advocacy',
    amount: 1
  },
  {
    metric: 'appreciation',
    amount: 8
  },
  {
    metric: 'awareness',
    amount: 1
  }
];

arcs = arcs.data(pie($scope.dataset));
arcs.transition().duration(500);

---

有人能给我指出正确的方向吗？

您需要重新应用更新加入

    .attr({
            d: arc,
            'class': function (d) {
              return d.data.metric;
            }
          })

提供新数据后：

---

我可能会从initialrender和update函数中提取render方法，这样您就不会重复代码。在本例中，过渡看起来不是很好，但我没有使用d3的饼图布局，因此我不知道如何使它们看起来更好。

您实际上只缺少根据新数据更新圆弧的部分。也就是说，更新函数的最后一行应该是

弧.过渡（）.持续时间（500）.attr（“d”，弧）

这不会完全像预期的那样工作，因为您无法真正线性插值曲线。添加一个自定义tween函数，如下所示

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

并使用它（不要忘记初始化

\u当前成员）。完整的例子