D3 Js 介紹

之前有提到最近要學的技能是Rails以及D3.js，這也是我今年的計劃，剛好也趁最近Diablo III手氣不好，一直打不到華戒，就抽空來都學學吧。

最近的文章，都不算是什麼教學文，算是學習記錄。

參考書籍

不久前歐萊禮的書在博客來有特價，我就買了這本D3，雖然前面廢話有點多，但在難度設定上是屬於較為簡單的，如果說會寫jquery以及js基礎概念，相信很容易上手。

參考書籍：網頁互動式資料視覺化：使用D3

圖片來源博客來

D3 簡介

D3 是全名是 Data-Driven Documents，是利用資料驅動文件的js lib。它可以將資料載入後，利用資料的內容驅動HTMl上的物件，甚至是針對使用者的操作將物件轉換成其它狀態。

簡單來說，就是將資料圖表化，甚至是透過使用者的操作，呈現出不同的樣式。

為什麼選擇D3

之前的文章有提到，我有在學習SVG，SVG是屬於向量的技術，而D3適合操作SVG來做圖形呈現，正好符合無限期支持向量技術的理念!?另外就是在工作上，資料驅動圖形是一個趨勢，和文字表格比起來，大家更愛看的是圖形呈現，且最好是能夠互動，基於這樣的理由…，D3是我所了解到最適合的工具。

範例

我一直以為他只能操控SVG物件，但事實上第一個Demo就導正我的觀念了…，SVG儘是適合表現視覺化，但是D3是可以控制Html大多數的DOM。

簡單介紹一下本篇所使用的D3 Api。

d3.select // DOM 選取器，類似jquery的$('')
d3.selectAll // 選取複數元素
selection.data // 將資料與被選擇的元素串接
selection.enter // 將資料傳送至未被串街的元素

本篇的Html(我習慣用日期分…有時候是前幾天寫的)。

本篇的CSS

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

以下是本篇的Js

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('.d0622').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'
	})

Demo

本篇雖然沒有介紹到SVG，但如果對D3有興趣，建議先對SVG有初步的了解，在學習上會更有幫助。

小感

把Js寫成文字好難…。

12/3 更新

由於有很多人是透過Google搜尋到本頁面，但本篇也沒有介紹非常詳細。而後來有參加鐵人賽，有製作相當多的Demo，如果對於D3.js有興趣，不妨參考看看我在鐵人賽的一些文章吧。

如果有任何問題，可以直接下方留言，或者不夠好的地方，也請多多賜教，感謝。