最近一直在做大數據可視化方面的事，想著，把目前比較流行的可視化開源項目也學習一下，于是，打算花點時間寫幾個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 之旅了。祝你好運。

總結

以上是生活随笔為你收集整理的d3.js 简介和安装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。