初入D3.js

先前的練習差不多了，接下來要開始實作，不過要先聲明本文是學習過程的記錄，所以很多範例是參考網頁互動式資料視覺化: 使用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

隨機的資料。

最後再補點樣式。

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

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