D3.js transitioning multiple arc paths

Question

I have a test case working for animating multiple arcs using an arcTween function but the thing is that I get an error that is thrown for each arc transition call

Error: Problem parsing d="M0,-52.5A52.5,52.5 0 1,1 NaN,NaNLNaN,NaNA42.5,42.5 0 1,0 0,-42.5Z"

I was wondering if anyone knew where I am missing something and how to fix this error.

Heres the fiddle http://jsfiddle.net/XuhVa/

var dataset = [
{
    "vendor-name":"HP",
    "overall-score":45
},
{
    "vendor-name":"CQ",
    "overall-score":86
},
{
    "vendor-name":"Tridion",
    "overall-score":73
},
{
    "vendor-name":"Sharepoint Server",
    "overall-score":99
},
{
    "vendor-name":"Drupal",
    "overall-score":24
},
{
    "vendor-name":"SiteCore",
    "overall-score":57
}
];

var width = 105
    , height = 105
    , innerRadius = 85;

var drawArc = d3.svg.arc()
    .innerRadius(innerRadius/2)
    .outerRadius(width/2)
    .startAngle(0);

var s = d3.selectAll('.score')
    .data( dataset )
    .enter()
    .append('svg')
    .attr('width', width)
    .attr('height', height)    
    .append('g')
    .attr("transform", "translate(" + width/2  + "," + height/2  + ")");

//creating background circle
s.append("circle")
    .attr("fill", "#ffffff")
    .attr("stroke", "#dfe5e6")
    .attr("stroke-width", 1)
    .attr('r', width / 2);

//creating arc path
var arc = s.append("path")
    .attr("fill", "#21addd")
    .attr('class', 'arc')
    .attr('d', drawArc);

//transition arc path from start angle to end angle
arc.transition()
    .duration(750)
    .delay(300)
    .ease('bounce')
    .call(arcTween, this );

//percentage value
s.append('text')
    .text(function(d){
        return d['overall-score'];
    })
    .attr("class", "perc")
    .attr("text-anchor", "middle")
    .attr('font-size', '36px')                        
    .attr("y", +10);


function arcTween(transition, newAngle) {

    transition.attrTween("d", function(d) {

        var interpolate = d3.interpolate( 0, 360*( d['overall-score']/100) * Math.PI/180    );

        return function(t) {

            d.endAngle = interpolate(t)

            return drawArc(d);
        };
    });
}

Answer 1

The problem is that initially, the endAngle is not set. This means that the very first computation of the arc paths will return NaN values. To fix, simply initialise endAngle to 0.

arc.each(function(d) { d.endAngle = 0; });

Modified jsfiddle here.