D3更新零值的饼图数据

Question

我正在使用动态JSON提要更新饼图.我的更新功能如下

function updateChart(data) {
arcs.data(pie(data)); // recompute angles, rebind data

arcs.transition()
    .ease("elastic")
    .duration(1250)
    .attrTween("d", arcTween)

sliceLabel.data(pie(data));

sliceLabel.transition()
    .ease("elastic").duration(1250)
    .attr("transform", function (d) {
    return "translate(" + arc2.centroid(d) + ")";
})
    .style("fill-opacity", function (d) {
    return d.value == 0 ? 1e-6 : 1;
});
}

function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function (t) {
    return arc(i(t));
};

当JSON具有所有对象的0值时,弧和标签将消失.正是我想要发生的事情.

问题是当我在一个充满零的一个JSON之后传递一个新的JSON时,标签会返回并补间等,但弧线永远不会重绘.

有关更正我的更新功能的任何建议,以便在它们的d值被推到零后正确重绘弧线？

- 编辑 -

Lars在下面建议我使用.enter(),就像我创建图形时一样.我试过这样做,但结果没有改变.请参阅下面的新更新功能.

this.updatePie = function updateChart(data) {
arcs.data(pie(data))
    .enter()
    .append("svg:path")
        .attr("stroke", "white")
        .attr("stroke-width", 0.5)
        .attr("fill", function (d, i) {
        return color(i);
})
    .attr("d", arc)
    .each(function (d) {
    this._current = d
})
arcs.transition()
    .ease("elastic")
    .duration(1250)
    .attrTween("d", arcTween)
sliceLabel.data(pie(data));
sliceLabel.transition()
    .ease("elastic").duration(1250)
    .attr("transform", function (d) {
    return "translate(" + arc2.centroid(d) + ")";
})
    .style("fill-opacity", function (d) {
    return d.value == 0 ? 1e-6 : 1;
});
}
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function (t) {
    return arc(i(t));
};
}

Answer 1

你实际上已经在D3中遇到了一个错误 - 如果一切都为零,则饼图布局会返回角度NaN,这会在绘制路径时导致错误.作为一种解决方法,您可以检查是否所有内容都为零并单独处理此案例.我修改了你的change功能如下.

if(data.filter(function(d) { return d.totalCrimes > 0; }).length > 0) {
  path = svg.selectAll("path").data(pie(data));
  path.enter().append("path")
      .attr("fill", function(d, i) { return color(d.data.crimeType); })
      .attr("d", arc)
      .each(function(d) { this._current = d; });
  path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
} else {
  path.remove();
}

在这里完成jsbin .