javascript - 使用 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

您没有在更新函数中处理 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(... 添加到该函数。

已更新 fiddle .