d3js - 如何在动画结束后添加每个弧形中心的文本？

Question

我用动画绘制了8个弧。我的要求是在添加弧（每个）之后我需要添加一条带有弧形中心动画的线，并且行的末尾也需要添加文本（请参见图片）

但我不知道如何处理这种情况。任何人都可以帮忙解决这个问题吗？

这就是我所要求的：

这是我的尝试：

var array = [

 [500, 600],
 [600, 700],
 [800, 900],
 [900,1000]

]

window.onload = function () {

  var width = 660,
    height = 200,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var arc = null;
var val = null;

var pie = d3.layout.pie()
    .value(function(d) { 
      return d; })
    .sort(null);


 function getTweenPie(arc) {
        return function (finish) {
            var start = {
                startAngle: 0,
                endAngle: 0
            };
            var i = d3.interpolate(start, finish);
            return function(d) { return arc(i(d)); };
        }
    }

var svg1 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


var update = function (i){

    var x = i*5;

    arc = d3.svg.arc()
    .innerRadius(radius - (5*x))
    .outerRadius(radius - (5.1*x));

  svg1.append('g')
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .datum(array[i]).selectAll("path")
      .data(pie) 
      .enter().append("path")
      .attr("fill", function(d, i) { return color(i); })
      .transition()
      .duration(5000)
      .attrTween('d', getTweenPie(arc))
      .each('end', function(){

        svg1.append('g').append('text')
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
        .text(i)

      })

}


for( var i = 0; i < array.length; i++) {

  update(i);

}

}

Live Demo

Answer 1

我更新了我的代码：

这对我来说很好。

window.onload = function () {
  
var objects = {
  
  "payStTotalGraph": [
    {
      "label": "Total Contract Amount",
      "value": 40900000,
      "color": "#fff"
    },
    {
      "label": "",
      "value": 20
    }
  ],
  "payStInvRisedGraph": [
    {
      "label": "Invoice Raised",
      "value": 170000
    },
    {
      "label": "",
      "value": 170000
    }
  ],
  "payStatusGraph": [
    {
      "label": "Net Certified",
      "value": 8748188.89
    },
    {
      "label": "Remaining",
      "value": 33089260.45
    }
  ]
}


var myColor = [
					["#e9d600", "#ff0"],
					["#27b6a9", "transparent"],
					["#bd565b", "#68bc4b"]
				]

var w = 200,
    h = 200,
    r = Math.min(w, h) / 2,
    labelr = r + 30, // radius for label anchor
    color = d3.scale.category20(),
    donut = d3.layout.pie(),
    arc = d3.svg.arc().innerRadius(r * 0.97).outerRadius(r);
    
function getTweenPie(arc) {
  return function (finish) {
    var start = {
      startAngle: 0,
      endAngle: 0
    };
    var i = d3.interpolate(start, finish);
    return function(d) {  return arc(i(d)); };
  }


}

var vis = d3.select("body").append("svg:svg").attr("width", w + 150).attr("height", h);

var nv = r * 0.97;
var n = 0;
var cr = 2;
var lineW = 80;
var textPoint = lineW + 10;
var tape;


var graphBuilder = function ( d, x ) {
  
  var outer = nv -= 10;
  var inner = nv *= 0.97;
 
  arc = d3.svg.arc().innerRadius( inner ).outerRadius( outer );
  
  labelr = outer;

  vis.data([d])

  var arcs = vis.selectAll("g.arc")
  .data(donut.value(function(d, i) {  return d.value }))
 .enter().append("svg:g")
  .attr("class", "arc"+x)
  .attr("transform", "translate(" + (r + 30) + "," + r + ")");
  
  //phrse 2
  
  arcs.append("svg:path")
    .attr("fill", function(d, i) { return myColor[x][i]; })
    .transition()
      .duration(5000)
    .attrTween('d', getTweenPie(arc))
    
    
    
  var g =  arcs.append('g')
      .attr("transform", function(d) {
        var c = arc.centroid(d),
            x = c[0],
            y = c[1],
            // pythagorean theorem for hypotenuse
            h = Math.sqrt(x*x + y*y);
        return "translate(" + ((x/h * labelr)-3) +  ',' +   (y/h * labelr) +  ")"; 
      });
      
  g.append('circle')
      .attr('cx', 0)
      .attr('cy', 0)
      .attr('r', cr)
      .style('fill', '#f00');
      
  g.append('line')
    .attr("transform", "translate(" + cr +  ',' +  cr +  ")" )
    .style("stroke", function(c,i){ if(!d[i].label) return; console.log(d[i].label); return "#000"})
    .attr("x1", 0)
    .attr("y1", -cr)
    .attr("x2", 0)
    .attr("y2", -cr)
    
    .transition()
    .delay(4000)
		.duration(1500)
		.attr("x2", lineW)
	
    
    g.append('text')
    
    .attr("transform", "translate(" + textPoint +  ',' +  cr +  ")" )
     .transition()
		 .delay(5000)
    .text(function (s, i ) {
       return d[i].label;
    });

}

for( label in objects ) {
  
  graphBuilder( objects[label], n++ );
  
}


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>