可視化工具D3.js教程入門（第九章）—— 讓圖表動起來

本文轉載自查看原文 2020-04-02 15:58 925 D3.js

在為圖標增加動畫之前，應該了解幾個新的 api 如下

d3.transition() 開啟一個動畫過渡。

transition.duration() 指定每個元素的持續時間（以毫秒為單位）。

transition.delay() 指定每個元素的延遲時間（以毫秒為單位)

　代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

    <svg width="500" height="400"></svg>

</body>

<script>

    var data = [90,75,12,36,54,88,24,66];
    var margin = 30;//svg 上下左右邊距

    var svg = d3.select('svg');
    var width = svg.attr('width');
    var height = svg.attr('height');

    //創建分組
    var g = svg.append('g').attr('transform','translate('+ margin +','+ margin +')');

    //定義 x y 軸比例尺
    var scaleX = d3.scaleBand()
        .domain(d3.range(data.length))
        .range([0,width - margin*2]);
    var scaleY = d3.scaleLinear()
        .domain([0,d3.max(data)])
        .range([height - margin*2,0]);

    //繪畫 x y  軸
    var axisX = d3.axisBottom(scaleX);
    var axisY = d3.axisLeft(scaleY);

    g.append('g').attr('transform','translate(0,'+ (height - margin*2) +')').call(axisX);
    g.append('g').attr('transform','translate(0,0)').call(axisY);

    // 創建矩形分組
    var gs = g.selectAll('rect').data(data).enter().append('g');


    //繪 柱狀圖  +  過度效果
    var rectP = 40;//柱狀圖間距
    gs.append('rect')
        .attr('x',function (d,i) {
            return scaleX(i) + rectP/2;
        })
        .attr('y',function (d,i) {
//            return scaleY(d);
//            return 0;//動畫的初始狀態為0  如果是這樣的話  就像下雨的效果  柱狀圖從上往下生長
//
            var min = scaleY.domain()[0];//[0,90]
            console.log(min)//  輸出 0
            return scaleY(min);// scaleY(0) y軸比例尺 映射出來的是最大值；   這個效果 等同於return height - 2*margin;的效果
        })
        .attr('width',function (d,i) {
            return scaleX.step() - rectP;
        })
        .attr('height',function (d,i) {
//            return height - margin*2 - scaleY(d);
            return 0;//動畫的初始狀態為0
        })
        .attr('fill','pink')
        .transition()//添加過度
        .duration(2000)//動畫的持續時間  毫秒
        .delay(function (d,i) {//延遲執行
            return i*300;//每個柱子逐漸開始的效果
        })
        .attr('y',function (d,i) {
            return scaleY(d);
        })
        .attr('height',function (d,i) {
            return height - margin*2 -scaleY(d);
        });



    //繪 文字  +  過度效果

    gs.append('text')
        .attr('x',function (d,i) {
            return scaleX(i) + rectP/2;
        })
        .attr('y',function (d,i) {
//            return scaleY(d);
            return height - 2*margin; //這里的初始化效果 同上面的矩形初始化效果一樣
        })
        .attr('dx',function (d,i) {
            return -2;
        })
        .attr('dy',function (d,i) {
            return 20;
        })
        .text(function (d,i) {
           return d;
        })
        .transition()
        .duration(2000)
        .delay(function (d,i) {
            return i*300;//300毫秒
        })
        .attr('y',function (d,i) {
           return scaleY(d);
        });


</script>

</html>

效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

可視化工具D3.js教程 入門 （第九章）—— 讓圖表動起來

免責聲明！

可視化工具D3.js教程入門（第九章）—— 讓圖表動起來