d 未设置预期信息

Question

我正在尝试用 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.logs 了吗？他们只是在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" 

Answer 1

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

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

参见例如this tutorial 了解有关一般模式的更多信息。