title: how to animate the labels to flow with the donut chart with a start angle and end angle in d3.
body: <p>In the code below the donut chart is animated, so as to start forming from a start<br>
  angle and end at an end angle. How do i make the text labels for the donut also 
  animated to flow along with the chart(i.e from the start angle to the end angle)? Currently all the text labels are clustered at the center and then move out to the center of the corresponding arcs.</p>
  
  <pre><code>var width = 960,
      height = 500,
      radius = Math.min(width, height) / 2;
  var grad=Math.PI/180;
  
  var color = d3.scale.ordinal().range(["#24b4d1", "#b1da42", "#fede17", "#d0164a","#ef5822"]);
  
  var segmentVal=[20,20,20,20,20];
  //this is the label i want to flow along with the donut chart
  var segments=["1","2","3","4","long one"];
  var name="center&gt;&gt;&gt;";
  
  var arc = d3.svg.arc().outerRadius(radius - 5).innerRadius(radius - 150);
  
  var pie=d3.layout.pie().startAngle(-30*grad).endAngle(330*grad);     
  
  var svg = d3.select("body")
           .append("svg")
           .attr("width", width)
           .attr("height", height)
           .append("g")
           .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
  
  
  var g = svg.selectAll(".arc")
              .data(pie(SegmentVal))
          .enter().append("g")
          .attr("class", "arc");
  
  
   g.append("path")
       .attr("fill", function(d, i) { return color(i); })
       .transition()
       .ease("exp")
       .ease("bounce")
       .duration(2500)
       .delay(function(d,i) { return i*10;})
       .attrTween("d", tweenPie);
  
  function tweenPie(b) 
  {
    var i = d3.interpolate({startAngle: -30*grad, endAngle:  -31*grad}, b);
    return function(t) { return arc(i(t)); };
   }
  
  var text=g.append("text")
      .transition()
      .duration(1500)
      .attr("transform",function(d){return "translate("+arc.centroid(d) +")";})
      .text(function(d,i) { return beepSegments[i] })
      .attr("dy",10)
      .attr("text-anchor", "middle");
  
  
  
  
  
  var holder=svg.selectAll("text")
      .data(name)
      .enter()
          .append("text")
      .attr("x","-350")
      .attr("y","-200")
      .style("text-anchor","middle")
      .text(name);
     holder.transition().attr("y","5");
  
     holder.transition()
       .delay(500)
       .ease("bounce")
       .duration(1000)
       .attr("x","0")
       .attr("y","5");
  </code></pre>