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）”
的值无效
错误：属性变换的值无效=“translate（NaN，NaN）”

我对d3.js相对较新。

提前致谢。

Answer 1

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

fiddle

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

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

1 个答案: