Javascript 使用新data.json更新d3饼图

我有一个动态数据源，它经常在浏览器中创建一个新的json

我能够使用下面的代码从这个json创建一个饼图（也是在）

这些数据经常更新，那么更新饼图的最佳方法是什么？看看这里我有另一个json称为data2

我如何简单地用data2替换数据并使饼图动画化/更新

---

注意：在某些更新中，值可能==0

以下是一些可能有帮助的其他类似问题：

---

我已经创建了一个工作版本，并将其发布在这里：（由于某些原因，我无法获得在小提琴中打球的过渡，所以我只是将其发布到我的网站上）

为了让代码更清晰，我省略了您的标签，将“data”重命名为“data1”，并插入了一些单选按钮以在数据数组之间切换。下面的代码片段显示了重要的位。你可以从我上面的页面获得全部代码

var svg = d3.select("#chartDiv").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("id", "pieChart")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(data1))
    .enter()
    .append("path");

  path.transition()
      .duration(500)
      .attr("fill", function(d, i) { return color(d.data.crimeType); })
      .attr("d", arc)
      .each(function(d) { this._current = d; }); // store the initial angles


function change(data){
    path.data(pie(data));
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs

}

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

你可能会发现迈克·博斯托克的代码很有帮助，这是我学会如何做的地方

var svg = d3.select("#chartDiv").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("id", "pieChart")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(data1))
    .enter()
    .append("path");

  path.transition()
      .duration(500)
      .attr("fill", function(d, i) { return color(d.data.crimeType); })
      .attr("d", arc)
      .each(function(d) { this._current = d; }); // store the initial angles


function change(data){
    path.data(pie(data));
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs

}

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}