错误：用于<path>属性d的值无效=” ..为饼图

我建立在d3.js和AngularJS圆环图我在指令链接功能的drawGraph功能的数据是一个。。对象的数组，并从服务器来到这里是函数的样子错误：用于<path>属性d的值无效=” ..为饼图

功能：

scope.drawGraph = function(data){ 
      console.log(data); 
      var width = 560, 
       height = 400, 
       radius = Math.min(width, height)/2.6, 
       legendRectSize = 18, 
       legendSpacing = 4; 

      var color = d3.scale.category20(); 

      var pie = d3.layout.pie() 
         .value(function(d) { return d.amount; }) 
         .sort(null); 

      var arc = d3.svg.arc() 
         .innerRadius(radius - 90) 
         .outerRadius(radius - 70); 

      var svg = d3.select("#chart").append("svg") 
         .attr("width", width) 
         .attr("height", height) 
         .append("g") 
         .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

      var path = svg.selectAll("path") 
         .data(pie(data)) 
         .enter().append("path") 
         .attr("fill", function(d, i) {return color(i); }) 
         .attr("d", arc); 

      var ticks = svg.selectAll("line").data(pie(data)).enter().append("line"); 
         ticks.attr("x1", 0) 
         .attr("x2", 0) 
         .attr("y1", -radius+10) 
         .attr("y2", -radius+70) 
         .attr("stroke", "gray") 
         .attr("transform", function(d) { 
          return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")"; 
         }); 

      var labels = svg.selectAll("text").data(pie(data)).enter().append("text"); 
         labels.attr("class", "value") 
         .attr("transform", function(d) { 
          var dist=radius+5; 
          var winkel=(d.startAngle+d.endAngle)/2; 
          var x=dist*Math.sin(winkel); 
          var y=-dist*Math.cos(winkel); 
          return "translate(" + x + "," + y + ")"; 
         }) 
         .attr("dy", "0.35em") 
         .attr("text-anchor", "middle") 
         .style('fill', 'rgba(0, 0, 0, 0.498039)') 
         .text(function(d){ 
          return d.data.category; 
         }); 
     }; 

scope.drawGraph(scope.data); // Function call

scope.data：

[{amount: 100, category: 'food'},{amount: 150, category: 'fuel'}, {amount: 50, category: 'grocery'},{amount: 250, category: 'Entertainment'}]

这里是控制台的回报：

Error: Invalid value for attribute d="M5.134096196425442e-15,-83.84615384615384A83.84615384615384,83.84615384615384 0 1,1 NaN,NaNLNaN,NaNA63.84615384615384,63.84615384615384 0 1,0 3.909449397278089e-15,-63.84615384615384Z"

而且也：

Error: Invalid value for attribute d="MNaN,NaNA83.84615384615384,83.84615384615384 0 1,1 NaN,NaNLNaN,NaNA63.84615384615384,63.84615384615384 0 1,0 NaN,NaNZ"

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

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

我是比较新的d3.js.

在此先感谢。

来源

2015-08-21 Mak

，请复制粘贴您的scope.data JSON数据，所以我们可以帮助您 –

这是obejcts的数组。我已将它添加到代码中。谢谢 – Mak

我用你的代码来创建一个小提琴，并没有遇到你得到的问题。

fiddle

<div id="chart" style="height:500px;"> 
    <svg></svg> 
</div>

来源

2015-08-21 07:31:12

谢谢。但我仍然收到错误。 – Mak

@Mak JSFiddle适合我，没有任何错误。执行小提琴时或在自己的代码中遇到错误吗？也许，你可以制作一个JSFiddle，帮助为我们其他人重现错误。 – altocumulus

我在我的代码中收到错误。我发现了这个问题。这是来自服务器的scope.data。感谢帮助。 – Mak

错误：用于<path>属性d的值无效=” ..为饼图

回答

相关问题