有不少朋友說學 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 就像是寫毛筆字，其他的可視化庫就像是寫鋼筆字。鋼筆字上手容易，下筆簡單，快捷，寫出來的東西叫做文章。毛筆字需要長期磨練，上手較難，但是一旦掌握了，便能行雲流水，心隨念想，可進可退，只在筆尖，寫出來的東西叫做藝術。
謝謝閱讀。
文檔信息
- 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
- 發表日期：2015 年 4 月 28 日
- 更多內容：OUR D3.JS - 數據可視化專題站 和 CSDN個人博客
- 備註：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝
