有不少朋友說學 D3 挺難的。為什麼呢？想寫一篇文章分析分析。

1. D3 出現的背景

D3.js 是 Github 上的一個開源專案，用於資料視覺化。作者是 Mike Bostock，紐約時報的工程師。現紐約時報上各種資料新聞的視覺化圖表，都是基於 D3 製作的。

資料新聞，是近年來十分熱門的一個行業，在網際網路新聞裡，新增上生動的資料分析，以圖形的形式展示，簡單易懂。

資料新聞是隨著大資料時代的潮流而出現。各公司和機構能掌握的資料越來越多，例如谷歌掌握了數以千萬億的搜尋資料，沃爾瑪掌握了全球的零售資料。如此大量的資料，在以前要處理是難以想象的，大部分資料或者沒有儲存下來，或者儲存下來了也不受重視，因為資料太多處理不了。

但是，如今計算機的能力已大幅度提高，硬體基礎不再成為問題，使用大資料來分析問題自然而然也成為了趨勢，因此目前被稱為大資料時代。關於大資料是什麼，可參見我總結的文章：

對於大量資料的處理中，有資料獲取、資料分析、資料簡化等等，還有資料視覺化。資料視覺化是將資料呈現給使用者的方式。請問，你是看影象舒服，還是看一堆數字舒服？

D3 就是在這種趨勢下誕生的。當然，與之一起誕生的視覺化庫還有很多，例如，processing.js、echarts等。但是，D3 絕對可稱得上是該領域的佼佼者，關於各種 JavaScript 庫流行度的分析，可閱讀：

2. D3 的優勢

視覺化的庫有很多，基於 JavaScript 開發的庫也有很多，D3 有什麼優勢呢？

（1）資料能夠與 DOM 繫結在一起

D3 能夠將資料與 DOM 繫結在一起，使得資料與圖形成為一個整體，即圖形中有資料、資料中有圖形。那麼在生成圖形或更改圖形時，就可以方便地根據資料進行操作，並且，當資料更改之後，也能簡單地更改圖形。

（2）資料轉換和繪製是獨立的

將資料變成圖表，需要不少數學演算法。很多視覺化庫的做法是：

提供一個函式 drawPie() ，輸入資料，直接繪製出餅狀圖。

但 D3 的做法是：

提供一個函式 computePie()，可將資料轉換成餅狀圖的資料，然後開發者可使用自己喜歡的方式來繪製餅狀圖。

雖然看起來 D3 使得問題變得麻煩了，但是在圖表要求比較複雜的時候，直接繪製的餅狀圖往往達不到要求，細微的部分沒有辦法更改。而 D3 將兩者分離開來，就極大地提高了自由度，以至於開發者甚至可以使用其他的圖形庫來顯示 D3 計算的資料。

（3）程式碼簡潔

JQuery 是網頁開發中很常用的庫，其中使用了鏈式語法，被很多人喜愛。D3 也採用了這一語法，能夠一個函式套一個函式，使得程式碼很簡潔。

（4）大量佈局

餅狀圖、樹形圖、打包圖、矩陣樹圖等等，D3 將大量複雜的演算法封裝成一個一個”佈局“，用於轉換資料。能夠適用於各種圖表的製作。

（5）基於SVG，縮放不會損失精度

SVG，是可縮放的向量圖形。D3 的繪製大部分是在 SVG 上繪製的，並且提供了大量的圖形生成器，使得在 SVG 上生成圖形變得簡單。

另外，由於 SVG 是向量圖，放大縮小不會有精度損失。

3. D3 難學嗎？

D3 有那麼多好處，那麼，D3 難學嗎？

我瞭解到，有不少朋友認為 D3 挺難學的。

我總結了一下，D3 難學的原因有三：

（1）官方文件寫得不好

官網上提供了 API 的資料，還有大量的例子。但是，每個例子怎麼做的只有程式碼，沒有文字說明。API 雖有說明，但是也卻沒有太多函式的使用例子。這就使用初入門的人感覺頭大。

（2）不容易適應資料轉換和繪製分開的模式

一個函式，drawPie()，輸入資料，輸出繪製圖形，一般人的思維模式是這樣的。但是，D3 偏偏將兩者分開了，分開之後能帶來極大的自由度，但是也使得它變得有些難學。

（3）外語不好

對大部分國人來說，看英文文件還是挺頭疼的。由於我比較熟練地掌握了日語，剛開始是閱讀的日文資料，因此入門較易。中文資料應該說還是比較匱乏的，不過近期已有所改善。畢竟是比較新的東西，慢慢資料會多起來的。

D3 乍看上去，有些難學，但是一旦掌握了，就能適應各種圖表的製作，自由度極大，功能極強。有人說，D3 就像是 Photoshop，其他的庫就像是美圖秀秀，前者需要一定的時間學習，學成後在影象處理上所向披靡，後者不需要學習時間，會和不會沒有太大的價值。這麼比喻可能有點誇張，我有一個更好的比喻（靈感來源自辜鴻銘先生的文章）。

D3 就像是寫毛筆字，其他的視覺化庫就像是寫鋼筆字。鋼筆字上手容易，下筆簡單，快捷，寫出來的東西叫做文章。毛筆字需要長期磨練，上手較難，但是一旦掌握了，便能行雲流水，心隨念想，可進可退，只在筆尖，寫出來的東西叫做藝術。

謝謝閱讀。

文件資訊

• 發表日期：2015 年 4 月 28 日
• 備註：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝