как анимировать метки, чтобы они текли с кольцевой диаграммой с начальным углом и конечным углом в d3.

В приведенном ниже коде кольцевая диаграмма анимирована таким образом, что ее формирование начинается с начального
угла и заканчивается конечным углом. Как сделать так, чтобы текстовые метки для пончика также анимировались, чтобы течь вместе с диаграммой (т.е. от начального угла к конечному углу)? В настоящее время все текстовые метки группируются в центре, а затем перемещаются к центру соответствующих дуг.

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

animation transition d3.js label donut-chart
person sruti    schedule 28.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы бы сделали это точно так же, как анимируете сами дуги:

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. Полный пример здесь.

person Lars Kotthoff    schedule 28.02.2014