D3.js 入門系列 - 簡介和安裝

簡介和安裝

近年來，可視化愈來愈流行，許多報刊雜誌、門戶網站、新聞、媒體都大量使用可視化技術，使得複雜的數據和文字變得十分容易理解，有一句諺語「一張圖片價值於一千個字」，的確是名副其實。各類數據可視化工具也如井噴式地發展，D3 正是其中的佼佼者。

D3 是什麼

D3 的全稱是（Data-Driven Documents），顧名思義能夠知道是一個被數據驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 JavaScript 的函數庫，使用它主要是用來作數據可視化的。若是你不知道什麼是 JavaScript ，請先學習一下 JavaScript，推薦阮一峯老師的教程。

JavaScript 標準參考教程

JavaScript 文件的後綴名一般爲 .js，故 D3 也常使用 D3.js 稱呼。D3 提供了各類簡單易用的函數，大大簡化了 JavaScript 操做數據的難度。因爲它本質上是 JavaScript ，因此用 JavaScript 也是能夠實現全部功能的，但它能大大減少你的工做量，尤爲是在數據可視化方面，D3 已經將生成可視化的複雜步驟精簡到了幾個簡單的函數，你只須要輸入幾個簡單的數據，就可以轉換爲各類絢麗的圖形。有過 JavaScript 基礎的朋友必定很容易理解它。

爲何要數據可視化

如今有一組數據， 【 4 ， 32 ， 15 ， 16 ， 42 ， 25 】 ，你能一眼看出它們的大小關係嗎？固然這裏的數據不算多，有那眼疾手快的傢伙站出來講我能一眼看出來！但更直觀的是用圖形顯示，以下圖：

經過圖形的顯示，能很清楚地知道他們的大小關係。固然，D3能力遠不止如此，這只是一個很小的應用。把枯燥乏味複雜的數據，用簡單明瞭的圖形表示出來，這就是數據可視化。

D3 有多受歡迎

D3 是一個開源項目，做者是紐約時報的工程師。D3 項目的代碼託管於 GitHub（一個開發管理平臺，目前已是全世界最流行的代碼託管平臺，雲集了來自世界各地的優秀工程師）。

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

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

怎麼學習和使用 D3

學習 D3 最好的地方是： http://d3js.org/ ，固然裏面都是英文的，而後就是本站O(∩_∩)O~。

D3 是一個 JavaScript 函數庫，並不須要一般所說的「安裝」。它只有一個文件，在 HTML 中引用便可。有兩種方法：

（1）下載 D3.js 的文件: d3.zip

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

（2）還能夠直接包含網絡的連接，這種方法較簡單：

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

但使用的時候要保持網絡鏈接有效，不能再斷網的狀況下使用。

學習 D3 須要什麼預備知識

想要經過 D3 來開啓數據可視化之旅的朋友，須要什麼預備知識呢？

• HTML：超文本標記語言，用於設定網頁的內容
• CSS：層疊樣式表，用於設定網頁的樣式
• JavaScript：一種直譯式腳本語言，用於設定網頁的行爲
• DOM：文檔對象模型，用於修改文檔的內容和結構
• SVG：可縮放矢量圖形，用於繪製可視化的圖形

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

饅頭華華：沒必要，徹底能夠直接學 D3，遇到不明白的地方，再看相關內容便可

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

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

須要什麼工具

製做網頁經常使用的工具便可。

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

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

服務器軟件：Apache、Tomcat 等

其中，服務器軟件可能不是必須的，不過 D3 中有些函數須要將 HTML 文件放置於服務器目錄下，才能正常使用，關於這點之後會再作說明。

好了，能夠開始你的 D3 之旅了。