Svg d未设置预期信息

我试图用d3绘制一个简单的svg饼图

以下是生成饼图和数据集的代码：

/* data */
var pieLayout = d3.layout.pie();
var pieData = pieLayout([21, 32, 35, 64, 83]);
/* generator */
var pieGenerator = d3.svg.arc()
                     .innerRadius(20)
                     .outerRadius(50)
                     .startAngle( function(d){ 
                        console.log(d) 
                        return d.startAngle }
                      )
                     .endAngle( function(d){ 
                        console.log(d)
                        return d.endAngle
                      });
/* usage */
svg.append('path').data(pieData).attr('d', pieGenerator)

无论出于什么原因，我的饼图只显示了一部分。为什么会这样？

查看

.startAngle

函数和

.endAngle

函数中的

console.log

s？他们只需记录

pieData

中的第一个对象：

Object {data: 21, value: 21, startAngle: 5.721709173346517, endAngle: 6.283185307179587} (index):189
Object {data: 21, value: 21, startAngle: 5.721709173346517, endAngle: 6.283185307179587}

如何让它在

pieData

中的所有对象中循环，而不仅仅是第一个对象

我尝试使用

datum

而不是

data

，但这只是使

d

对于每个循环等于

pieData

。下面是反映使用数据的console.log：

[Object, Object, Object, Object, Object]
[Object, Object, Object, Object, Object]
Error: Invalid value for <path> attribute d="MNaN,NaNA50,50 0 1,1 NaN,NaNLNaN,NaNA20,20 0 1,0 NaN,NaNZ" 

[对象，对象，对象，对象，对象]
[对象，对象，对象，对象，对象，对象]
错误：属性d=“MNaN，NaNA50,50 0 1,1 NaN，NaNLNaN，NaNA20,20 0 1,0 NaN，NaNZ”的值无效

您没有正确使用D3选择…数据模式。您只需要附加一个元素并将数据绑定到它，而不是

svg.selectAll("path").data(pieData)
   .enter().append('path').attr('d', pieGenerator)

---

有关常规模式的更多信息，请参见，例如。

太好了！但是感觉有点奇怪，选择一个不存在的路径，给这个不存在的选择器数据，输入它，然后再附加路径…无论如何，现在可以工作了，谢谢