1

我正在使用动态 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));
};
}
4

1 回答 1

8

您实际上在 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 。

于 2013-11-12T17:44:50.837 回答