title: d3 how to tween inner radius for pie chart
body: <p>I need to animate pie chart into a donut chart (or ring chart). 
  Here is my code: </p>
  
  <pre><code>  var arc = d3.svg.arc().outerRadius(radius-margin).innerRadius(0)
    var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(60)
  
    var path = pie_chart.selectAll('path')
      .data(pie(data))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) {
        return color_scale(d.data.device)
      })
      .transition().attr('d', arc2)
  </code></pre>
  
  <p>Some times it's working but sometimes it is not. I have tried to apply transition to arc but not working. </p>
  
  <pre><code> var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(0).transition().innerRadius(60)
  </code></pre>