錯誤：的值無效 <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.93.949349397278089e-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

我用您的代碼創建了一個小提琴，但是沒有遇到您遇到的問題。

小提琴

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