javascript - 圆环图未使用新值更新

Question

我有一个基于数组中对象的值呈现的圆环图。初始渲染工作得很好，但我似乎无法让更新工作——我更改了数据，但它没有在视觉上更新。我按照这个例子：http: //jsfiddle.net/N5Znf/

这是我当前的代码：http: //jsbin.com/eGaziZA/1/edit

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

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

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

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

Answer 1

您需要重新申请更新加入

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

提供新数据后：http: //jsbin.com/eGaziZA/3/edit

我可能会从初始渲染和更新函数中抽象出渲染方法，这样您就不会重复代码。在这个例子中，过渡看起来不太好，但我没有使用 d3 的饼图布局，所以我不知道如何让它们看起来更好。

Answer 2

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

arcs.transition().duration(500).attr("d", arc);

这不会完全按预期工作，因为您不能真正线性地插入曲线。所以像这样添加一个自定义补间函数

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

并改用它（不要忘记初始化._current成员）。完整的例子在这里。