错误：<path> 属性 d=".. 饼图的值无效

Question

我正在 d3.js 和 AngularJS 中创建一个圆环图。 我在指令链接函数中有一个 drawGraph 函数。数据是一个对象数组，来自服务器。 这是函数的样子。

功能：

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'}]

这是控制台返回的内容：

错误：属性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 "

还有：

错误：属性 d="MNaN,NaNA83.84615384615384,83.84615384615384 0 1,1 NaN,NaNLNaN,NaNA63.84615384615384,63.84615384615384 0 1,0 NaN,NaNZ" 的值无效

错误：属性 transform="rotate(NaN)" 的值无效

错误：属性 transform="translate(NaN,NaN)" 的值无效

我对 d3.js 比较陌生。

提前致谢。

Answer 1

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

fiddle

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