d3js 滚动可见性 - 饼图的系列动画

我正在开发一个 d3 应用程序 - 带有饼图 - 我想加载动画并呼吁采取行动。就像在滚动过程中图表变得可见一样。

饼段围绕中心轴生长的位置。所以像接力赛一样补间或捕捉到另一个部分

http://jsfiddle.net/pg886/192/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>

<div class="piechart" data-role="piechart" data-width=400 data-height=400 data-radius=30  data-innerradius=20
    data-data=x>
</div>

<style>
    .piechart{
      /*border: 1px solid black;*/  
      /*text-align: center;
      font-size: 12px;*/
    }
</style>

<script>

$( document ).ready(function() {
        console.log("test")

       var $this = $('.piechart');

        var data = [{
            "label": "Apples",
            "value": 100
        },
        {
            "label": "Pears",
            "value": 120
        },
        {
            "label": "Bananas",
            "value": 20
        }];


        var w = $this.data("width");
        var h = $this.data("height");
        var ir = $this.data("innerradius");
        var r = $this.data("radius");

        function colores_google(n) {
            var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f"];
            //var colores_g = ["#47abd5", "#005a70", "#f5a0a3", "#ff7276", "#a9a19c", "#d0743c", "#ff8c00"];
            return colores_g[n % colores_g.length];
        }

        var radius = Math.min(w, h) / 4;


        var arc = d3.svg.arc()
            .outerRadius(radius - 10)
            .innerRadius(0);

        var labelArc = d3.svg.arc()
            .outerRadius(radius - r)
            .innerRadius(radius - ir);    

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



        var chart = d3.select('.piechart').append("svg")
                        .attr("class", "chart")
                        .attr("width", w)
                        .attr("height", h)
                        .attr("transform", "translate(0,0)");

        var piechart = chart              
                        .append("g")
                        .attr("class", "piechart")
                        .attr("width", (radius*2))
                        .attr("transform", "translate(0,"+h/4+")");

        var path_group = piechart.append("g")
            .attr("class", "path_group")
            .attr("transform", "translate(90," + ((h / 4) - 20) + ")");


        var padding = 45;
        var legendPaddingTop = 30;
        var legend = chart.append("g")
            .attr("class", "legend")
            .attr("width", w/2)
            .attr("height", h)
            .attr("transform", "translate(" + (w - 50) + "," + (h / 4) + ")");  


        var label_group = legend.append("svg:g")
            .attr("class", "label_group")
            .attr("transform", "translate(" + (-(w / 3) + 20) + "," + 0 + ")");

        var legend_group = legend.append("svg:g")
            .attr("class", "legend_group")
            .attr("transform", "translate(" + (-(w / 3) - 100) + "," + 0 + ")");


        var g = path_group.selectAll(".arc")
            .data(pie(data))
            .enter().append("g")
            .attr("class", "arc");

        g.append("path")
            .attr("d", arc)
            .style("fill", function(d, i) { 
                return colores_google(i);
            });


        var legendHeight = legendPaddingTop;
        var ySpace = 18;

        //draw labels                   
        var labels = label_group.selectAll("text.labels")
            .data(data);

        labels.enter().append("svg:text")
            .attr("class", "labels")
            .attr("dy", function(d, i) {                  
                legendHeight+=ySpace;   
              return (ySpace * i) + 4;
            })
            .attr("text-anchor", function(d) {
              return "start";
            })
            .text(function(d) {
              return d.label;
            });

        labels.exit().remove();
        //draw labels


        //draw legend
        var legend = legend_group.selectAll("circle").data(data);

        legend.enter().append("svg:circle")
            .attr("cx", 100)
            .attr("cy", function(d, i) {
              return ySpace * i;
            })
            .attr("r", 7)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", function(d, i) {
              return colores_google(i);
            });

        legend.exit().remove();
        //draw legend

        //reset legend height
        //console.log("optimum height for legend", legendHeight);
        $this.find('.legend').attr("height", legendHeight);

        function type(d) {
          d.value = +d.value;
          return d;
        }

});

</script>