Question

所以，我有一系列带有递增/递减计数器的数据点，如图所示：

{id: 1, count: 1, abnormal: 0, visualisation_colour: #FFFFFF};
{id: 2, count: 2, abnormal: 0, visualisation_colour: #FFFFFF};
{id: 3, count: 3, abnormal: 0, visualisation_colour: #FFFFFF};

如果我将计数器（count和abnormal）减少到零，然后再次开始递增它们，我得到：

Error: Invalid value for <path> attribute 
d="M0,-100A100,100 0 1,1 NaN,NaNLNaN,NaNA50,50 0 1,0 0,-50Z"

对于所有零数据点重复。如何防止这种情况发生，一旦它们被清零，再次递增它们也会因同样的错误而失败。我正在使用this question

中引用的（现在正在运行的）代码

Answer 1

因此，答案基本上包含来自@Lars Kotthoff's的here回答。

引入他使用的过滤器：

if(data.filter(function(d) { return d.totalCrimes > 0; }).length > 0) {

进入renderSlices函数：

function renderSlices(pie, arc) {
    var slices;

    if (pie(_data).filter(function(d) {return d.value > 0;}).length > 0 ) {

        slices = _pieG.selectAll("path.arc")
            .data(pie(_data));

        slices.enter()
            .append("path")
            .attr("class", "arc")
            .attr("fill", function(d) {
                return d.data.visualisation_colour;
            });

        slices.transition()
            .attrTween("d", function(d) {
                var currentArc = this.__current__;
                if (!currentArc) {
                    currentArc = {startAngle: 0, endAngle: 0};
                }
                var interpolate = d3.interpolate(currentArc, d);
                this.__current__ = interpolate(1);
                return function(t) {
                    return arc(interpolate(t));
                };
            });
    } else {
        slices = _pieG.selectAll("path.arc")
            .data(pie(_data));
        slices.remove();
}

您可以移除所有零点弧线，并清理图形。

递减数据点时出现d3js错误 - 如何解决？

1 个答案: