使用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(...到該函數中。

更新小提琴 。