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)

无论出于何种原因，我只得到一段饼图。这是为什么？

查看console.log函数和.startAngle函数中的.endAngle个？他们只记录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 select ...数据模式。您只需添加一个元素并将数据绑定到它而不是

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

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

d未设置预期信息

1 个答案: