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

我可能会从initialrender和update函数中抽象出render方法，这样你就不会重复代码了。在这个例子中，转换看起来并不是很好，但我没有使用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成员）。完整示例here。

圆环图未使用新值更新

2 个答案: