D3 的全稱是(Data-Driven Documents),顧名思義可以知道是一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的文檔。聽名字有點(diǎn)抽象,說簡(jiǎn)單一點(diǎn),其實(shí)就是一個(gè) JavaScript 的函數(shù)庫(kù),使用它主要是用來(lái)做數(shù)據(jù)可視化的。
為什么要數(shù)據(jù)可視化
現(xiàn)在有一組數(shù)據(jù), 【 4 , 32 , 15 , 16 , 42 , 25 】 ,你能一眼看出它們的大小關(guān)系嗎?當(dāng)然這里的數(shù)據(jù)不算多,有那眼疾手快的家伙站出來(lái)說我能一眼看出來(lái)!但更直觀的是用圖形顯示,如下圖:
通過圖形的顯示,能很清楚地知道他們的大小關(guān)系。當(dāng)然,D3能力遠(yuǎn)不止如此,這只是一個(gè)很小的應(yīng)用。把枯燥乏味復(fù)雜的數(shù)據(jù),用簡(jiǎn)單明了的圖形表示出來(lái),這就是數(shù)據(jù)可視化。
項(xiàng)目地址為:https://github.com/d3/d3/wiki/Gallery
效果演示地址:https://bl.ocks.org/mbostock
效果截圖演示: