错误：< path>的值无效属性d =“MNaN，NaNA67.5,67.5 0 1,1 NaN，NaNL0,0Z” [英] Error:Invalid value for <path> attribute d="MNaN,NaNA67.5,67.5 0 1,1 NaN,NaNL0,0Z"

问题描述

我已经创建了一个饼图，当所有的值都存在时，它工作正常，但是当所有的值都为0时，在控制台我得到600多个错误说：

错误：属性transform =translate（NaN，NaN）的值无效

错误：属性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 ，d3.event.pageX + 10 +px）; 
 div.style（top，d3.event.pageY-25 +px）; 
 div.style ，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 '）
 .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（文本）
 .data（pie（data））; 
 
 text.enter（）
 .append（text）
 .attr（dy，.35em）
 .text ）{
 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）; 
 returntranslate（+（x / h * labelr）+'，'+（y / h * labelr）+）; 
}; 
}）
 .styleTween（text-anchor，function（d）{
 this._current = this._current || d; 
 var interpolate = d3 。
 return（0）; 
 return function（t）{
 var d2 = interpolate（t）; 
 return （d2.endAngle + d2.startAngle）/ 2> Math.PI？end：start; 
}; 
}）
 .text b $ b return（d.value +％）; 
}）; 
 text.exit（）
 .remove（）; 
  

解决方案

我删除了数据集中的对象， 0并将其复制到新数组中，以使索引保持一致和一致。

  var k; 
 function（object）{
 for（var key in object）{
 if（object [key] .value！= 0）{
 data [k] = object [key ]; 
 k ++; 
} 
} 
返回数据; 
} 
  

这样的饼图将只接受更新的数据集

I have made a pie chart which works fine when all values are present,but when all values are made 0, in console i get 600+ errors saying:

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"

I am unable to figure out. Please help.

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();

解决方案

I deleted the objects in my dataset wherein the values were 0 and copied them into a new array so that the indices remain uniform and consistent.

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

something like this- the pie chart would then only take the updated dataset

这篇关于错误：< path>的值无效属性d =“MNaN，NaNA67.5,67.5 0 1,1 NaN，NaNL0,0Z”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！