如何动画标签以d3中的开始角度和结束角度与圆环图流动。

Question

在下面的代码中，甜甜圈图是动画的，以便开始从一个角度开始形成角度并以一个终止角度结束。我如何使甜甜圈的文字标签 动画与图表一起流动（即从起始角度到结束角度）？目前所有的文本标签都集中在中间，然后移出到相应弧线的中心。

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>>>"; 

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"); 

Answer 1

你会在完全相同的方式为你的动画本身的弧做到这一点：

var text=g.append("text") 
    .text(function(d,i) { return segments[i] }) 
    .attr("dy",10) 
    .attr("text-anchor", "middle") 
    .transition() 
    .ease("exp") 
    .ease("bounce") 
    .duration(2500) 
    .delay(function(d,i) { return i*10;}) 
    .attrTween("transform", tweenText); 

function tweenText(b) 
{ 
    var i = d3.interpolate({startAngle: -30*grad, endAngle: -31*grad}, b); 
    return function(t) { return "translate(" + arc.centroid(i(t)) + ")"; }; 
} 

唯一的区别是，你设置transform，而不是d属性。完整示例here。