iT邦幫忙

DAY 8
4

SVG 與 D3.js系列 第 8

初入D3.js

完整範例:http://wcc723.github.io/d3js/2014/10/07/Ironman-30-days-08/

先前的練習差不多了,接下來要開始實作,不過要先聲明本文是學習過程的記錄,所以很多範例是參考網頁互動式資料視覺化: 使用D3,當然到了後面也會有很多不同的運用,並不會重頭到尾都是這本書的內容,就像上一篇一樣,還可以玩玩柯P的API。

D3 的強項

就許多資料所介紹D3js是一套js library,D3是利用資料(Data)來”驅動”文件的物件(DOM),所以就這點就和Jquery有很大的差別,Jquery容易上手,就在於它對DOM的操作相對容易;而D3js在操作DOM上有點類似Jquery,但它的重點在於使用資料來控制文件。

資料

資料的格式相當多種,在學習D3js之前(到現在也是),我對於資料的處理相當的不在行,就連基本陣列都有問題,更不用提到json,所以就...慢慢開始吧。

最基本的資料就是陣列,D3js只要有陣列就可以開始驅動文件,一般來說最基本的陣列像下面這樣:

[30,26,27,31,13,10,20,20,24,25,25,21,17,21,6,7,13,23,27,31]

這個陣列是用隨機的方式去產生的,可以用以下的Js程式碼來產生:

var dataset = []; //定義空的陣列

for (var i=0; i < 20; i++){ //如果數量少於20
var newNum = 5 + Math.floor(Math.random() * 30);
//產生一個 0...30的整數,並且加上5
dataset.push(newNum);
//將整數送到剛剛的空陣列
}

如果對於上面這段程式碼覺得沒有問題,那麼就可以繼續的往下學習了。

使用 D3js

首先,當然要先把d3.js加到HTML上。

<script src="/js/d3.min.js"></script>

接下來要寫點Script ,範例如下:

var dataset = []; //建立空的資料陣列

for (var i=0; i < 20; i++){
var newNum = 5 + Math.floor(Math.random() * 30);
dataset.push(newNum);
}
//隨機產生一組長度20,值為5~35的數字。

d3.select('.demo').selectAll('div') //選取 class內的div
.data(dataset) // 將資料加入至 div
.enter() // return data
.append('div') // 這邊加入的div已經有包含data
.attr('class','bar') //套用class
.style('height', function(d){ //將data的值取出作為高
return (d*3) + 'px'
})

這一段程式碼中要特別注意的是.data(dataset).enter()這一段,這段是將剛剛所產生的陣列用迴圈的方式執行,所以在這之後的append('div')就會依據資料的量去執行,如果量有20筆,那麼就會執行append('div')20次。

DEMO

隨機的資料。

10,27,20,20,11,19,26,34,14,17,30,27,21,24,32,33,11,5,21,16

最後再補點樣式。

.bar {
display: inline-block;
width: 20px;
height: 75px;
margin-right: 3px;
background-color: RoyalBlue;
}

D3js我就是這樣開始的,當然為了學這個,也是翻遍了許多資料,希望剩下文章能夠帶給大家學習上的參考。


上一篇
D3js 前置作業,製作簡易WebServer
下一篇
D3js 將資料投影到SVG上
系列文
SVG 與 D3.js30

1 則留言

0
oxxo
iT邦研究生 2 級 ‧ 2014-10-07 12:29:41

D3 真是有趣,太期待這系列啦!!!

我要留言

立即登入留言