d3.js 簡介和學習資源介紹

最近一直在作大數據可視化方面的事，想着，把目前比較流行的可視化開源項目也學習一下，因而，打算花點時間寫幾個d3的例子，也算是一個入門級的學習，廢話很少說，首先介紹一下d3，後面咱們直接看例子。

 

D3 是什麼

D3 的全稱是（Data-Driven Documents），顧名思義能夠知道是一個被數據驅動的文檔。聽名字有點抽象，說簡單一點，其實就是一個 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/

包含有不少示例和 API，要想駕輕就熟的使用 D3，熟悉 API 是避不開的。

• Mike Bostock 的博客和做品展現板

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

• OUR D3.JS 數據可視化專題站

http://www.ourd3js.com/

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

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 之旅了。祝你好運。

點擊打開原文