使用JSON

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。