Arc.centroid Returning (nan, Nan) In D3

Fair warning: I'm a D3 rookie here. I'm building a donut chart using D3 and all is well so far, except that the labels on the slices aren't aligning with the slices. Using the code

Solution 1:

Finally got it. The arc.centroid function expects data with precomputed startAngle and endAngle which is the result of pie(data). So the following helped me:

var text = svg.selectAll("text")
                    .data(pie(data))

followed by the rest of the calls. Note that you might have to change the way to access the text data that you want to display. You can always check it with

// while adding the text elements
    .text(function(d){ console.log(d); return d.data.textAttribute })