d3js滾動可見性-餅圖的系列動畫

Question

我正在制作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>

Answer 1

因此，您可以輕松實現這一目標，並且有幾個模塊可以為您提供幫助。

圓弧補間首先，此塊為您提供了如何補間圓弧的示例。 基本上，您不能自動獲得它，因此必須編寫自己的attrTween函數。 幸運的是，這非常簡單，Mike Bostock在此舉了一個很好的例子。

這是一個代碼示例-但是該鏈接對正在發生的事情給出了非常好的詳細描述。

.attrTween("d", function(d) {
    var interpolate = d3.interpolate(d.endAngle, newAngle);    
    return function(t) {
      d.endAngle = interpolate(t);
      return arc(d);
    };
}   

接下來，您想要類似Donut的過渡效果 。 這實際上是您要達到的最終結果。 這種效果確實很容易實現，您所需要做的就是正確設置角度和時間。

角度 ：因此在這里，您希望endAngle和startAngle在開始時都相同（這應該是前一段的endAngle值，或第一段的0 ）。

時間 ：您想讓1個動畫在開始下一個動畫之前完成，只需延遲一下即可。 您可以看到此代碼段是如何完成的：

.transition()
.delay(function(d,i) { return i * 500; })
.duration(500)
.attrTween(...)

 const dataset = [ { age: "<5", population: 2704659 }, { age: "5-13", population: 4499890 }, { age: "14-17", population: 2159981 }, { age: "18-24", population: 3853788 }, { age: "25-44", population: 14106543 }, { age: "45-64", population: 8819342 }, { age: "≥65", population: 612463 }, ]; const TIME = 2000 / dataset.length; const color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); const pie = d3.pie() .sort(null) .value(function(d) { return d.population; }); const path = d3.arc() .innerRadius(0) .outerRadius(350); d3.select("#container") .selectAll(".arc") .data(pie(dataset)) .enter() .append("g") .attr("class", "arc") .append("path") .attr("fill", function(d) { return color(d.data.age); }) .transition() .duration(TIME) .ease(d3.easeLinear) .delay(function(d, i) { return i * TIME; }) .attrTween("d", function(d) { // Note the 0.1 to prevent errors generating the path const angleInterpolation = d3.interpolate(d.startAngle + 0.1, d.endAngle); return function(t) { d.endAngle = angleInterpolation(t); return path(d); } }); 

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="800" height="800"> <g id="container" transform="translate(400, 400)"></g> </svg>