Reputation: 10551
I'm trying to draw a simple svg pie chart with d3.
Here's the code that generates the pie chart and the data set:
/* 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)
For whatever reason, I just get one segment of my pie chart appearing. Why is this?
See those console.log
s inside the .startAngle
function and the .endAngle
function? They just log the first object inside 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}
How do I get it to loop through all of the objects in pieData
, and not just the first one?
I tried using datum
instead of data
, but that just made d
equal to pieData
for each loop. Here's the console.log that reflects using datum:
[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"
Upvotes: 0
Views: 81
Reputation: 109282
You are not using the D3 select...data pattern correctly. You're appending just a single element and binding data to it instead of
svg.selectAll("path").data(pieData)
.enter().append('path').attr('d', pieGenerator)
See e.g. this tutorial for more information on the general pattern.
Upvotes: 1