エラー：<path>属性の値が無効です。d = "MNaN、NaNA67.5,67.5 0,1 NaN、NaNL0,0Z"

Question

すべての値が存在するときに正しく動作する円グラフを作成しましたが、すべての値が0でコンソールを作りましたが、次のようなエラーが表示されます：

Error: Invalid value for attribute transform="translate(NaN,NaN)"

Error: Invalid value for attribute d="M4.133182947122317e-15,-67.5A67.5,67.5 0 1,1 NaN,NaNL0,0Z"

私は分かりません。助けてください。

var data = [ 
    {label:"Category 1", value:0}, 
    {label:"Category 2", value:0}, 
    {label:"Category 3", value:0} 
]; 

var colorRange = d3.scale.category20(); 
var color = d3.scale.ordinal() 
    .range(colorRange.range()); 
var width = 150; 
var height = 150; 
var radius = Math.min(height,width)/2; 
var labelr = radius + 10; 
var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { 
    return d.value; 
    }); 
var arc = d3.svg.arc() 
    .outerRadius(width/2 * 0.9) 
    .innerRadius(0); 

var outerArc = d3.svg.arc() 
    .innerRadius(0) 
    .outerRadius(Math.min(width, height)/2 * 0.9); 

var legendRectSize = (radius * 0.05); 
var legendSpacing = radius * 0.02; 

var svg = d3.select(element[0]).append('svg') 
    .attr({width: width, height: height}) 
    .append('g'); 
var div = d3.select("body").append("div").attr("class", "toolTip"); 

data.forEach(function (d) { 
    if(d.value == undefined || d.value == NaN){ 
    d.value = 0; 
    }     
}); 

svg.attr('transform', 'translate(' + 200 + ',' + height/2 + ')'); 
svg.append("g") 
    .attr("class", "slices"); 
svg.append("g") 
    .attr("class", "labelName"); 
svg.append("g") 
    .attr("class", "labelValue"); 
svg.append("g") 
    .attr("class", "lines"); 

var slice = svg.select(".slices").selectAll("path.slice") 
    .data(pie(data), function(d){   
    return d.data.label 
    }); 

slice.enter() 
    .insert("path") 
    .style("fill", function(d) { return color(d.data.label); }) 
    .attr("class", "slice"); 

slice 
    .transition().duration(1000) 
    .attrTween("d", function(d) { 
    this._current = this._current || d; 
    var interpolate = d3.interpolate(this._current, d); 
    this._current = interpolate(0); 
    return function(t) { 
     return arc(interpolate(t)); 
    }; 
    }) 
slice 
    .on("mousemove", function(d){ 
    div.style("left", d3.event.pageX+10+"px"); 
    div.style("top", d3.event.pageY-25+"px"); 
    div.style("display", "inline-block"); 
    div.html((d.data.label)+"<br>"+(d.data.value)+"%"); 
    }); 
slice 
    .on("mouseout", function(d){ 
    div.style("display", "none"); 
    }); 

slice.exit() 
    .remove(); 

var legend = svg.selectAll('.legend') 
    .data(color.domain()) 
    .enter() 
    .append('g') 
    .attr('class', 'legend') 
    .attr('transform', function(d, i) { 
     var height = legendRectSize + legendSpacing; 
     var offset = height * color.domain().length/2; 
     var horz = -3 * legendRectSize; 
     var vert = i * height - offset; 
     return 'translate(' + horz/2 + ',' + 90 + ')'; 
    }); 

/*legend.append('rect') 
    .attr('width', legendRectSize) 
    .attr('height', legendRectSize) 
    .style('fill', color) 
    .style('stroke', color); 

legend.append('text') 
    .attr('x', legendRectSize + legendSpacing) 
    .attr('y', legendRectSize - legendSpacing) 
    .text(function(d) { return d; }); 

------- TEXT LABELS -------*/ 

var text = svg.select(".labelName").selectAll("text") 
    .data(pie(data)); 

text.enter() 
    .append("text") 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return (d.value+"%"); 
    }); 

function midAngle(d){ 
    return d.startAngle + (d.endAngle - d.startAngle)/2; 
} 

text 
    .transition().duration(1000) 
    .attrTween("transform", function(d) { 
    this._current = this._current || d; 
    var interpolate = d3.interpolate(this._current, d); 
    this._current = interpolate(0); 
    return function(t) { 
     var d2 = interpolate(t); 
     var pos = outerArc.centroid(d2), 
     x = pos[0], 
     y = pos[1], 
     h = Math.sqrt(x*x + y*y); 
     return "translate(" + (x/h * labelr) + ',' + (y/h * labelr) + ")"; 
    }; 
    }) 
    .styleTween("text-anchor", function(d){ 
    this._current = this._current || d; 
    var interpolate = d3.interpolate(this._current, d); 
    this._current = interpolate(0); 
    return function(t) { 
     var d2 = interpolate(t); 
     return (d2.endAngle + d2.startAngle)/2 > Math.PI ? "end" : "start"; 
    }; 
    }) 
    .text(function(d) { 
    return (d.value+"%"); 
    }); 
text.exit() 
    .remove(); 

Answer 1

値が0であったオブジェクトを削除し、新しい配列にコピーして、インデックスが均一で一貫性があるようにしました。

var k; 
function(object){ 
          for (var key in object) { 
          if (object[key].value != 0) { 
           data[k] = object[key]; 
           k++; 
          } 
          } 
      return data; 
     } 

円グラフthis-のようなものが、その後にのみ更新データセット