之前有提到最近要學的技能是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有興趣,不妨參考看看我在鐵人賽的一些文章吧。
如果有任何問題,可以直接下方留言,或者不夠好的地方,也請多多賜教,感謝。