【 隨筆 】 D3 難嗎？

有很多朋友說學 D3 挺難的。為何呢？想寫1篇文章分析分析。

1. D3 出現的背景

D3.js 是 Github 上的1個開源項目，用于數據可視化。作者是 Mike Bostock，紐約時報的工程師。現紐約時報上各種數據新聞的可視化圖表，都是基于 D3 制作的。

數據新聞，是最近幾年來10分熱門的1個行業，在互聯網新聞里，添加上生動的數據分析，以圖形的情勢展現，簡單易懂。

數據新聞是隨著大數據時期的潮流而出現。各公司和機構能掌握的數據愈來愈多，例如谷歌掌握了數以千萬億的搜索數據，沃爾瑪掌握了全球的零售數據。如此大量的數據，在之前要處理是難以想象的，大部份數據或沒有保存下來，或保存下來了也不受重視，由于數據太多處理不了。

但是，如今計算機的能力已大幅度提高，硬件基礎不再成為問題，使用大數據來分析問題自但是然同樣成為了趨勢，因此目前被稱為大數據時期。關于大數據是甚么，可參見我總結的文章：

【 大數據時期需要轉變的思惟 】

對大量數據的處理中，有數據獲得、數據分析、數據簡化等等，還有數據可視化。數據可視化是將數據顯現給用戶的方式。請問，你是看圖象舒服，還是看1堆數字舒服？

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

【 JavaScript 圖形庫的流行度調查 】

2. D3 的優勢

可視化的庫有很多，基于 JavaScript 開發的庫也有很多，D3 有甚么優勢呢？

（1）數據能夠與 DOM 綁定在1起

D3 能夠將數據與 DOM 綁定在1起，使得數據與圖形成為1個整體，即圖形中有數據、數據中有圖形。那末在生成圖形或更改圖形時，就能夠方便地根據數據進行操作，并且，當數據更改以后，也能簡單地更改圖形。

（2）數據轉換和繪制是獨立的

將數據變成圖表，需要很多數學算法。很多可視化庫的做法是：

提供1個函數 drawPie() ，輸入數據，直接繪制出餅狀圖。

但 D3 的做法是：

提供1個函數 computePie()，可將數據轉換成餅狀圖的數據，然后開發者可以使用自己喜歡的方式來繪制餅狀圖。

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

（3）代碼簡潔

JQuery 是網頁開發中很經常使用的庫，其中使用了鏈式語法，被很多人愛好。D3 也采取了這1語法，能夠1個函數套1個函數，使得代碼很簡潔。

（4）大量布局

餅狀圖、樹形圖、打包圖、矩陣樹圖等等，D3 將大量復雜的算法封裝成1個1個”布局“，用于轉換數據。能夠適用于各種圖表的制作。

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

SVG，是可縮放的矢量圖形。D3 的繪制大部份是在 SVG 上繪制的，并且提供了大量的圖形生成器，使得在 SVG 上生成圖形變得簡單。

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

3. D3 難學嗎？

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

我了解到，有很多朋友認為 D3 挺難學的。

我總結了1下，D3 難學的緣由有3：

（1）官方文檔寫得不好

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

（2）不容易適應數據轉換和繪制分開的模式

1個函數，drawPie()，輸入數據，輸出繪制圖形，1般人的思惟模式是這樣的。但是，D3 恰恰將二者分開了，分開以后能帶來極大的自由度，但是也使得它變得有些難學。

（3）外語不好

對大部份國人來講，看英文文檔還是挺頭疼的。由于我比較熟練地掌握了日語，剛開始是瀏覽的日文資料，因此入門較易。中文資料應當說還是比較匱乏的，不過近期已有所改良。畢竟是比較新的東西，漸漸資料會多起來的。

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

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

謝謝瀏覽。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈