test

<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>

var x,
      y,
      N = 15,
      duration = 2000,
      delay = 500,
      radius = 50;
  
  var rscale = d3.scale.linear()
                 .domain([0, N])
                 .range([0, radius]);

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

var arc = d3.svg.arc();

d3.csv("fruit.csv", function(error, data) {
    data.forEach(function(d) {
        d.fruit = d.Fruit;
        d.count = +d.Count;
    });
  
    x = d3.scale.ordinal()
          .domain(data.map(function(d) { return d.fruit; }))
          .rangeRoundBands([0, w]);
    y = d3.scale.linear()
          .domain([d3.max(data.map(function(d) { return d.count; })), 0])
          .range([0, h]);
  
   // add pie
    var g = svg.selectAll(".symbol")
        .data(function() { return pie(data); })
        .enter()
        .append("g")
        .attr("class", "symbol");

g.append("rect")
        .style("fill", function(d) { return color(d.data.fruit); })
        .attr({
          x: function(d){ return x(d.data.fruit); },
          y: function(d){ return y(d.data.count); },
          width: function(d) { return rscale(d.data.count); },
          height: function(d) { return rscale(d.data.count); },
          rx: function(d){return 0.5*rscale(d.data.count); },
          ry: function(d){return 0.5*rscale(d.data.count); },
        })
       .transition()
       .duration(1500)
       .delay(1000)
       .attr({
          width: x.rangeBand(),
          height: function(d) { return h - y(d.data.count); },
          rx: 0,
          ry: 0
        });
            
    //draw bar chart first 
        g.append("path")
        .style("fill", function(d) {
            return color(d.data.fruit);
        });
  
  function scatterText(d) { return "translate(" + (x(d.data.fruit)+x.rangeBand()/3+10) + "," + (y(d.data.count)-10) + ")"; }
  
  function barText(d) { return "translate(" + (x(d.data.fruit)+x.rangeBand()/3+10) + "," + (0.5*y(d.data.count)+0.5*h) + ")"; }

g.append("text")
         .text(function(d) { return d.data.fruit; })
         .attr({
           fill: 'black', 'alignment-baseline': 'before-edge', 'text-anchor': 'middle',
           transform: scatterText
          })
         .style('font', '12px Lucida Console')
         .transition()
        .duration(1500)
        .delay(1000)
        .attr("transform", barText);

//call the function after a period of time
    setTimeout(toPie, 2500);
  
});

function toPie(){
    var g = svg.selectAll(".symbol");

g.selectAll("rect").remove();

g.selectAll("path")
        .transition()
        .duration(duration)
        .tween("arc", arcTween)
    
    setTimeout(function() { return g.selectAll("text").remove(); }, 2000)
      
       g.transition()
        .duration(duration)
        .delay(3000)
        .attr("transform", explode);

//The idea here is to first draw an arc like a bar,
    //then tween the bar-like arc to the donut arc. 
    //Thus, the fruit is find the initial bar size and position:
    //The initial bar height is approximated by the length of 
    //outside arc: barHeight = init_OuterRadius * init_Angle. 
    //So we can get the startAngle shown in f;
    //(Note that: the measure of angle in d3 starts from vertical y:
    // y    angle
    // |    /   
    // |   /        
    // |  /             
    // |o/
    // |/      
    // )                                       
    function arcTween(d) {
        var path = d3.select(this),
            text = d3.select(this.parentNode).select("text"),
            x0 = x(d.data.fruit),
            y0 = h - y(d.data.count); //initial height

return function(t) {
            var r = h / 2 / Math.min(1, t + 1e-3),
                //a is stepping factor, starting from 1 to 0,
                //as the timer t goes.
                //A simper alternative: a = 1 - t;
                a = Math.cos(t * Math.PI / 2),
                xx = (-r + (a) * (x0 + x.rangeBand()) + (1-a)*(w + h)/2),
                yy = ((a) * h + (1 - a) * h/2),
                f = {
                    innerRadius: (r - x.rangeBand() / (2 - a)) * a,
                    outerRadius: r,
                    //endAngle:0,
                    startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle,
                    endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle
                };
            path.attr("transform", "translate(" + xx + "," + yy + ")");
            path.attr("d", arc(f));
            text.attr("transform", "translate(" + arc.centroid(f) + ")translate(" + xx + "," + yy + ")rotate(" + ((f.startAngle + f.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
        };
    }

function explode(x, index) {
      var offset = 600;
      var angle = (x.startAngle + x.endAngle) / 2;
      var xOff = Math.sin(angle) * offset;
      var yOff = -Math.cos(angle) * offset;
      return "translate("+xOff+", "+yOff+")";
  }
}
</script>
</body>

https://d3js.org/d3.v3.min.js