D3.js - Bar Chart

D3.js

這幾天和隔壁同事相約實踐前輩食夢黑貘的成為資料工程師最初的 28 堂課計畫，看完系列文章後便著手規畫要看的書還有想要實作的東西。在資料視覺化呈現(Data Visualization)的這一塊，身為前端工程師的我除了閱讀理論外，當然要找一套工具來玩玩。由於之前專案用過Highcharts、Fusioncharts、jqGrid，因此以上暫不考慮。東摸摸西看看之下就選了D3.js了。

以下是學習筆記啦，不是什麼教學文章。

D3.js是什麼？

D3是Data-Driven Documents，是將資料視覺化呈現的library，甚至可與使用者互動。舉凡Bar Chart、Pie Chart、Bubble Chart、Tag Cloud或更複雜有趣的圖表，都可以以之呈現。

D3.js官方網站

入門

找了一本極輕鬆的(原文)書來入門噢！只有74頁。

Getting Started with D3
　
Getting Started with D3

範例 & 解說 - Bar Chart

看完第二章剛剛好可以來做個小範例 - 一個簡單的長條圖(Bar Chart)。

HTML

“barChart”這個div是一個容器，等等我會將灌好數據的長條們一一放進去。

<div class="barChart"></div>

JS

    function draw(data) {
        d3.select('.barChart') //選擇放在barChart這個div容器裡面
        .selectAll('div') //選取".barChart"範圍內的所有的div
        .data(data) //將資料加入div
        .enter() //傳入資料
        .append('div') //放到畫面上
        .attr('class','item clearfix') //將剛剛放到畫面上的div，加上class "item"
        .text(function(d){return d.text}) //加上文字描述，使用json檔案裡面的 "text" 欄位
        .append('div') //加入包含資料的div，這個div是用來畫圖用的
        .text(function (data) {
            return data.count; //畫圖用div加上文字描述，使用json檔案裡面的 "count" 欄位
        })          
        .attr('class','bar') //畫圖用div加上class "bar"
        .style('width', function(d){ //將剛剛對每個畫圖用div設定寬度，這裡將取出的count值乘以15，即為顯示在畫面上的px數
            return (d.count*15)  + 'px'
        });
    };

    //Mockup JSON，使用JSON Generator http://www.json-generator.com
    //資料載入完畢後會call "draw" 這個callback function
    d3.json('http://www.json-generator.com/api/json/get/bTGclonYia?indent=2', draw); //Mockup

Demo

D3.js - Bar Chart

D3.js - Bar Chart - Demo

參考資料

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-D3.js：Bar Chart 長條圖簡單範例。

留言

張貼留言