animation - 如何为标签设置动画以在 d3 中使用起始角度和结束角度与圆环图一起流动。

Question

在下面的代码中，圆环图是动画的，以便从头开始形成
角并以终止角结束。我如何为 donut 制作文本标签
动画与图表一起流动(即从开始角度到结束角度)？目前所有的文本标签都聚集在中心，然后向外移动到相应弧线的中心。

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 .