使用JSON更新D3饼图

Question

我有这个饼图： http : //jsfiddle.net/fg9MU/265/

当我从长度为3的数据集更改为长度为2的数据集时，似乎并不喜欢它。

原始数据：

var dataSet1 = [{
  "id": "001 Helicopter",
  "name": "Helicopter",
  "priority": "highClass",
  "value": 1
}, {
  "id": "005 Rear Rotor",
  "name": "Rear Rotor",
  "priority": "lowClass",
  "value": 1
}, {
  "id": "002 Rotor",
  "name": "Rotor",
  "priority": "lowClass",
  "value": 1
}]

变更资料集：

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

  }

传递函数新数据：

changeData(dataSet2);

数据集2：

var dataSet2 = [{
  "id": "001 Helicopter",
  "name": "Helicopter",
  "priority": "highClass",
  "value": 1
}, {
  "id": "004 Seat",
  "name": "Seat",
  "priority": "lowClass",
  "value": 1
}]

它似乎没有更新数据集。 两者中的一个（即“直升机”）可以很好地调整（图表的1/2），而其他两个则不能。 我已经看到了以下示例： http : //bl.ocks.org/mbostock/5681842

它说使用这个：

function type(d) {
  d.apples = +d.apples || 0;
  d.oranges = +d.oranges || 0;
  return d;
}

但是我不知道如何将其实现到我的数据集中：（任何想法？

Answer 1

您没有在update函数中处理enter ， update ， exit模式：

function changeData(data) {
    var path = svg.datum(data)
      .selectAll("path").data(pie); //<-- update selection
    path.exit().remove(); //<-- exit selectin
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs for the paths left
  }

请注意 ，即使更改了此代码，您也不会处理changeData上输入的项目。 您应该在数据增长时将path.enter().append(...到该函数中。

更新小提琴 。