1

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

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

1 回答 1

0

您可以以与为弧本身设置动画的方式完全相同的方式执行此操作：

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属性。完整的例子在这里。

于 2014-02-28T20:19:04.127 回答