第一章 簡介和安裝

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

D3 是什么

D3 的全稱是（Data-Driven Documents），顧名思義可以知道是一個被數(shù)據(jù)驅(qū)動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數(shù)庫，使用它主要是用來做數(shù)據(jù)可視化的。如果你不知道什么是 JavaScript ，請先學習一點 JavaScript 的基礎知識。

W3School 的 JavaScript 教程

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

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

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

http://wiki.jikexueyuan.com/project/d3wiki/images/intro-1.png" alt="柱形圖" />

通過圖形的顯示，能很清楚地知道他們的大小關系。當然，D3 能力遠不止如此，這只是一個很小的應用。把枯燥乏味復雜的數(shù)據(jù)，用簡單明了的圖形表示出來，這就是數(shù)據(jù)可視化。

D3 有多受歡迎

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

http://wiki.jikexueyuan.com/project/d3wiki/images/intro-2.png" alt="Github倉庫排名" />

在 GitHub 上最受關注的項目有哪些呢？

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

如何學習和使用 D3

以下是幾個學習 D3 的站點：

• 官方網(wǎng)站

http://d3js.org/

包含有很多示例和 API，要想得心應手的使用 D3，熟悉 API 是避不開的。

• Mike Bostock 的博客和作品展示板

http://bost.ocks.org/mike/

• OUR D3.JS 數(shù)據(jù)可視化專題站

http://www.ourd3js.com/

筆者開設的站點，包含有 D3 的一系列教程。

D3 是一個 JavaScript 函數(shù)庫，并不需要通常所說的“安裝”。它只有一個文件，在 HTML 中引用即可。有兩種方法：

（1）下載 D3.js 的文件

• d3.zip

解壓后，在 HTML 文件中包含相關的 js 文件即可。

（2）直接包含網(wǎng)絡的鏈接

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

這種方法比較簡單，但要保持網(wǎng)絡連接有效。

學習 D3 需要什么預備知識

想要通過 D3 來開啟數(shù)據(jù)可視化之旅的朋友，需要什么預備知識呢？

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

路人甲：額，我需要學那么多才能開始學 D3 嗎？心理壓力有點點...大

饅頭華華：不必，完全可以直接學 D3，遇到不明白的地方，再看相關內(nèi)容即可

路人乙：HTML、CSS 啥的，我從來都沒用過，也沒有關系嗎？

饅頭華華：只要在 W3School ，分別看看這幾個詞是什么意思，是用來干什么的，再看幾個簡單例子即可，沒有必要全掌握了再學習 D3。

需要什么工具

制作網(wǎng)頁常用的工具即可。

記事本軟件：Notepad++、Editplus、Sublime Text 等，選擇自己喜歡的即可。

瀏覽器：IE9 以上、Firefox、Chrome 等，推薦用 Chrome

服務器軟件：Apache、Tomcat 等

其中，服務器軟件可能不是必須的，不過 D3 中有些函數(shù)需要將 HTML 文件放置于服務器目錄下，才能正常使用，關于這點以后會再做說明。

好了，可以開始你的 D3 之旅了。祝你好運。