近年來(lái)，可視化越來(lái)越流行，許多報(bào)刊雜志、門戶網(wǎng)站、新聞、媒體都大量使用可視化技術(shù)，使得復(fù)雜的數(shù)據(jù)和文字變得十分容易理解，有一句諺語(yǔ)“一張圖片價(jià)值于一千個(gè)字”，的確是名副其實(shí)。各種數(shù)據(jù)可視化工具也如井噴式地發(fā)展，D3 正是其中的佼佼者。

D3是什么

D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個(gè)被數(shù)據(jù)驅(qū)動(dòng)的文檔。聽(tīng)名字有點(diǎn)抽象，說(shuō)簡(jiǎn)單一點(diǎn)，其實(shí)就是一個(gè) JavaScript 的函數(shù)庫(kù)，使用它主要是用來(lái)做數(shù)據(jù)可視化的。

JavaScript 文件的后綴名通常為 .js，故 D3 也常使用 D3.js 稱呼。D3 提供了各種簡(jiǎn)單易用的函數(shù)，大大簡(jiǎn)化了 JavaScript 操作數(shù)據(jù)的難度。由于它本質(zhì)上是 JavaScript ，所以用 JavaScript 也是可以實(shí)現(xiàn)所有功能的，但它能大大減小你的工作量，尤其是在數(shù)據(jù)可視化方面，D3 已經(jīng)將生成可視化的復(fù)雜步驟精簡(jiǎn)到了幾個(gè)簡(jiǎn)單的函數(shù)，你只需要輸入幾個(gè)簡(jiǎn)單的數(shù)據(jù)，就能夠轉(zhuǎn)換為各種絢麗的圖形。有過(guò) JavaScript 基礎(chǔ)的朋友一定很容易理解它。

為什么要數(shù)據(jù)可視化

現(xiàn)在有一組數(shù)據(jù)， 【 4 ， 32 ， 15 ， 16 ， 42 ， 25 】 ，你能一眼看出它們的大小關(guān)系嗎？當(dāng)然這里的數(shù)據(jù)不算多，有那眼疾手快的家伙站出來(lái)說(shuō)我能一眼看出來(lái)！但更直觀的是用圖形顯示，如下圖：

通過(guò)圖形的顯示，能很清楚地知道他們的大小關(guān)系。當(dāng)然，D3能力遠(yuǎn)不止如此，這只是一個(gè)很小的應(yīng)用。把枯燥乏味復(fù)雜的數(shù)據(jù)，用簡(jiǎn)單明了的圖形表示出來(lái)，這就是數(shù)據(jù)可視化。

D3 有多受歡迎

D3 是一個(gè)開(kāi)源項(xiàng)目，作者是紐約時(shí)報(bào)的工程師。D3 項(xiàng)目的代碼托管于 GitHub（一個(gè)開(kāi)發(fā)管理平臺(tái)，目前已經(jīng)是全世界最流行的代碼托管平臺(tái)，云集了來(lái)自世界各地的優(yōu)秀工程師）。

在 GitHub 上最受關(guān)注的項(xiàng)目有哪些呢？

JQuery 的名聲夠大了，但排名第 6，D3 排名第 5。

怎么學(xué)習(xí)和使用 D3

學(xué)習(xí) D3 最好的地方是： http://d3js.org/

D3 是一個(gè) JavaScript 函數(shù)庫(kù)，并不需要通常所說(shuō)的“安裝”。它只有一個(gè)文件，在 HTML 中引用即可。有兩種方法：
（1）下載 D3.js 的文件: d3.zip
解壓后，在 HTML 文件中包含相關(guān)的 js 文件即可。
（2）還可以直接包含網(wǎng)絡(luò)的鏈接，這種方法較簡(jiǎn)單：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
但使用的時(shí)候要保持網(wǎng)絡(luò)連接有效，不能再斷網(wǎng)的情況下使用。

學(xué)習(xí) D3 需要什么預(yù)備知識(shí)

想要通過(guò) D3 來(lái)開(kāi)啟數(shù)據(jù)可視化之旅的朋友，需要什么預(yù)備知識(shí)呢？

• HTML：超文本標(biāo)記語(yǔ)言，用于設(shè)定網(wǎng)頁(yè)的內(nèi)容
• CSS：層疊樣式表，用于設(shè)定網(wǎng)頁(yè)的樣式
• JavaScript：一種直譯式腳本語(yǔ)言，用于設(shè)定網(wǎng)頁(yè)的行為
• DOM：文檔對(duì)象模型，用于修改文檔的內(nèi)容和結(jié)構(gòu)
• SVG：可縮放矢量圖形，用于繪制可視化的圖形