CODEWITHSUNDEEP
svgd3.js
Starkers
Starkers

Reputation: 10551

d not being set with expected information

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.logs 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

Answers (1)

Lars Kotthoff
Lars Kotthoff

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

Related Questions