D3.js實現帶動畫效果的柱狀圖

阿新 • • 發佈：2018-12-17

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>D3</title>
    <style>
        body { 

            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 14px;
        }

        .bar {
            border: 1px solid #0b3536;
            border-radius: 6px;
            fill: #0098d8;
        }

        #bar .barText {
            fill: #f5faf8;
            font- 
weight: 500;
        }

        .axisY text,
        .axisX text,
        .headerText text {
            fill: #0b3536;
        }

        #bar svg {
            background-color: #f5faf8;
        }
    </style>
</head>

<body>
    <div class='container'>
        <div id='bar'> 
</div>
    </div>
</body>

</html>
<script src="/static/js/d3.js"></script>
<script>
    /** V4柱狀圖初始化 **/
    function BarInit(width, height, rectHeight, rectPadding, padding, data) {

        // 獲取x軸的資料
        var Xdatas = data.map(function (d) {
            return d.key;
        });

        // 獲取y軸的資料
        var values = data.map(function (d) {
            return d.value;
        });

        // 建立X,Y軸比例尺
        var xScale = d3.scaleBand().domain(Xdatas).rangeRound([0, width]).padding(0.1),
            yScale = d3.scaleLinear().domain([0, d3.max(values)]).rangeRound([height, 0]);


        // 將svg容器新增到Dom中
        var svg = d3.select('#bar').append('svg')
            .attr('width', width + padding.left + padding.right)
            .attr('height', height + padding.top + padding.bottom);

        // 將group元素新增到svg容器中
        var g = svg.append('g')
            .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')');

        // 新增圖表的表頭
        g.attr('class', 'headerText')
            .append('text')
            .attr('transform', 'translate(' + (width / 2) + ',' + (-padding.top / 2) + ')')
            .attr('text-anchor', 'middle')
            .attr('font-weight', 600)
            .text('Simple Bar Chart');

        // 新增X軸
        g.append('g')
            .attr('class', 'axisX')
            .attr('transform', 'translate(0,' + height + ')')
            .call(d3.axisBottom(xScale))
            .attr('font-weight', 'bold');

        // 新增Y軸
        g.append('g')
            .attr('class', 'axisY')
            .call(d3.axisLeft(yScale).ticks(10));

        // 建立盛放矩形的容器
        var chart = g.selectAll('.bar')
            .data(data)
            .enter().append('g')

        // 新增矩形元素
        chart.append('rect')
            .attr('class', 'bar')
            .attr('x', function (d) {
                return xScale(d.key);
            })
            //動畫開始
            .attr("y", function (d) {
                var min = yScale.domain()[0];
                return yScale(min);
            })
            .attr("height", function (d) {
                return 0;
            })
            .transition()
            .delay(function (d, i) {
                return i * 200;
            })
            .duration(2000)
            .ease(d3.easeBounceIn)
            //動畫結束
            .attr('y', function (d) {
                return yScale(d.value);
            })
            .attr('height', function (d) {
                return height - yScale(d.value);
            })
            .attr('width', xScale.bandwidth());

        // 新增矩形內提示文字
        chart.append('text')
            .attr('class', 'barText')
            .attr('x', function (d) {
                return xScale(d.key);
            })
            //動畫開始
            .attr("y", function (d) {
                var min = yScale.domain()[0];
                return yScale(min);
            })
            .attr("height", function (d) {
                return 0;
            })
            .transition()
            .delay(function (d, i) {
                return i * 200;
            })
            .duration(1000)
            .ease(d3.easeBounceIn)
            //動畫結束
            .attr('y', function (d) {
                return yScale(d.value);
            })
            .attr('dx', xScale.bandwidth() / 2)
            .attr('dy', 20)
            .attr('text-anchor', 'middle')
            .text(function (d) {
                console.log("d.value", d.value)
                return d.value;
            });

        // 新增hover事件
        chart.on('mouseover', function (d) {
                d3.select(this).attr('opacity', 0.7);
            })
            .on('mouseout', function (d) {
                d3.select(this)
                    .transition()
                    .duration(500)
                    .attr('opacity', 1)
            });
    }

    const padding = {
        top: 50,
        right: 20,
        bottom: 30,
        left: 30
    };
    const width = 760 - padding.left - padding.right;
    const height = 380 - padding.top - padding.bottom;
    const rectHeight = 25; //每個矩形所佔的畫素高度(包括空白)
    const rectPadding = 4; //矩形之間的空白
    var data = [{
            key: 'aa',
            value: 32
        },
        {
            key: 'bb',
            value: 26
        },
        {
            key: 'cc',
            value: 45
        },
        {
            key: 'dd',
            value: 38
        },
        {
            key: 'ee',
            value: 53
        },
        {
            key: 'ff',
            value: 48
        },
        {
            key: 'gg',
            value: 42
        },
        {
            key: 'hh',
            value: 34
        },
        {
            key: 'ii',
            value: 37
        },
        {
            key: 'jj',
            value: 36
        }
    ]; //資料

    BarInit(width, height, rectHeight, rectPadding, padding, data);
</script>

效果圖如下圖所示：在這裡插入圖片描述

D3.js實現帶動畫效果的柱狀圖

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content

D3 v4.x入門（1-4）——帶動畫的餅狀圖

依舊是簡單粗暴的餅圖原始碼（帶動畫） <template> <div id='svgContainer' style=""> <div class="every"> <h3>餅圖探究</h3&

JS實現倒計時動畫效果

window.onload = function(){ setInterval(FreeTime,1000); } function FreeTime(){ var curTime = Date.now();

6、R語言繪制帶errorbar 的柱狀圖

label lines arp erro 技術 html ide mage name 轉載：http://www.cnblogs.com/xudongliang/p/7283733.html data <- data.frame(mean = c(10, 15),

wpf自定義帶刻度的柱狀圖控件

ber temp cee ssi readonly alignment mas sso rap 效果圖：主要代碼xaml: <UserControl x:Class="INSControls._01Conning.Steer.ConningSpeedBa

關於如何使用原生HTML + JS + CSS繪製簡單折線柱狀圖

前言 CSS確實很重要，且有點奇技淫巧，看起來規則十分簡單，但是創意更重要，如何用css構造出自己想要的效果，寫的程式碼好看優雅十分重要。在看了不借助Echarts等圖形框架原生JS快速實現折線圖效果並自己重新實現了以後，實在是感慨CSS的強大之處，並作出記錄。正文先上結果圖：

d3.js（v5.7）樹狀圖

edi 博客總結 adf 報錯控制臺擴展數據處理分享一、新建畫布二、數據處理三、繪制連接線圖示：四、

MATLAB繪製帶圖案的柱狀圖

function applyhatch(h,patterns,colorlist)</span> %APPLYHATCH Apply hatched patterns to a figure % APPLYHATCH(H,PATTERNS) creates a

vue實現一個動效柱狀圖

接手了一個需求的時候，其中有個 UI圖是這樣的：按照 PM本來的意思，這張圖中只有那幾個數字是從介面獲取的，而且從介面獲取到的每項數字的值，與目前標註的數字相差不會超過 10%，所以柱狀圖的條形高度不用管，直接一張圖片靜態的就行了，這確實很省事，三下五除

echarts （js外掛）點選柱狀圖顯示x軸y軸資料加百分號

tooltip: { show: true, // 是否顯示提示框元件 trigger: 'axis', //座標軸觸發，用在柱狀圖，折線圖等會使用類目軸的圖表中使用 ormatter: function( datas

第三章——vue、d3進階之完整的柱狀圖

1、效果圖，圖中有資料值，x軸座標,y軸軸 2、程式碼 <template> <div id="mydiv"> <!-- <svg> <rect></rect> <

JS（JQ）實現帶動畫的回到頂部效果

實現功能：滾動到頁面某一個高度的時候，回到頂部按鈕出現。點選之後回到網頁頂部，按鈕隱藏。程式碼如下，jQuery引用的是百度CDN的，因此整段程式碼複製下來後在瀏覽器執行即可。 <!DOCTY

d3.js學習筆記（二）：完整的柱狀圖示例

本示例採用d3的3.x版本庫，示例程式碼如下： d3.fullAxisExample = function() { var width = 240; var height = 240; //在 body 裡新增一個 SVG 畫布

d3.js（v5.7）完整地畫一個柱狀圖

img edi http 代碼坐標不能畫布分享 ueditor 一、首先定義畫布大小以及繪畫區域的位置（總不能頂著屏幕邊沿畫吧）代碼：圖示：二、橫、縱向坐標軸代碼：圖示：

Android高效率實現彈出帶動畫效果的對話方塊，仿照微信對話方塊效果

看到很多app頁面裡都有彈出對話方塊效果，今天使用PopupWindow實現帶動畫效果的對話方塊，先看效果圖：效果圖：分析實現思路：彈出對話方塊帶有動畫效果對話方塊從底部向上彈出彈出對話方塊時，窗體背景呈現灰色（半透明）對話方塊四周具

原生js和canvas實現的柱狀圖、餅狀圖、折線圖

轉載來自https://blog.csdn.net/u013302113/article/details/77985744 <html> <head lang="en"> </head> <body> &

資料視覺化 D3.js實現力導向圖之二（node帶文字說明和提示）

從官方下載下的demo，直接加text帶文字，始終未能顯示出來，但是title卻能顯示出來，最後經過與網上其他地方做出來的例子用firebug進行跟蹤對比，發現能夠正確顯示title的html裡邊g標籤為node裡邊包含circle和text(circle、title和te

Android實現GridView的item長按拖動刪除完美實現（帶動畫效果）

領導這幾天讓做一個專案，就是可以實現像支付寶首頁一樣的可以長按拖動，刪除的介面，以前沒做過，領導讓我做的時候覺得簡直是老虎吃天，無從下手啊，可是領導的任務還是要實現的，沒辦法，就自己網上找咯，但是網上的demo五花八門無法滿足我的需求，而且bug還很多，所以最後

用jquery實現選項卡效果（非常漂亮，帶動畫效果）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

Shine.js實現動態陰影效果

b2c ava .net fun text 動態 cti element gravity Shine.js 是一個用於實現美麗陰影的 JS 庫。特性 1、可動態旋轉光的位置，投影出不同的陰影效果　　 2、可定制的陰影，　　 3、沒有庫依賴關系,AMD兼容使

D3.js實現帶動畫效果的柱狀圖

相關推薦