svg - d not being set with expected information -

i'm trying draw simple svg pie chart d3.

here's code generates pie chart , 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, 1 segment of pie chart appearing. why this?

see console.logs inside .startangle function , .endangle function? log 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 loop through all of objects in piedata, , not first one?

i tried using datum instead of data, made d equal piedata each loop. here's console.log reflects using datum:

[object, object, object, object, object] [object, object, object, object, object] error: invalid value <path> attribute d="mnan,nana50,50 0 1,1 nan,nanlnan,nana20,20 0 1,0 nan,nanz"  

you not using d3 select...data pattern correctly. you're appending single element , binding data instead of

svg.selectall("path").data(piedata)    .enter().append('path').attr('d', piegenerator) 

see e.g. this tutorial more information on general pattern.