Question

我制作了一个饼图，当所有值都存在时工作正常，但是当所有值都为0时，在控制台中我会得到600多个错误：

错误：属性转换的值无效=＆＃34;翻译（NaN，NaN）＆＃34;

错误：属性d =＆＃34的值无效; M4.133182947122317e-15，-67.5A67.5,67.5 0 1,1 NaN，NaNL0,0Z＆＃34;

我无法理解。请帮忙。

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;
        }

这样的事情 - 饼图只会采用更新的数据集

错误：<path>属性的值无效d =＆＃34; MNaN，NaNA67.5,67.5 0 1,1 NaN，NaNL0,0Z＆＃34;

1 个答案: