title: D3.js transitioning multiple arc paths
body: <p>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 </p>
  
  <p>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"</p>
  
  <p>I was wondering if anyone knew where I am missing something and how to fix this error. </p>
  
  <p>Heres the fiddle <a href="http://jsfiddle.net/XuhVa/" rel="nofollow">http://jsfiddle.net/XuhVa/</a></p>
  
  <pre><code>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);
          };
      });
  }
  </code></pre>