在數據可視化的世界中，D3 可謂極其耀眼的明星。
很多人着迷於 D3 那近乎無限可能的圖形開發能力，而又被 D3 那海量的 API 所困住，往往學了很久卻不得其道。
(還不瞭解 D3 的同學，可看《D3 vs G2 vs Echarts》)
下面，我以數據可視化開發爲目的，說下我的 D3 入門路徑：
一、學習 SVG
D3 全名爲 Data Drive Document，即通過 Data 操作 Document，而在做數據可視化時，Data 最常 Drive 的 Document 便是 SVG。
SVG 的學習，可看阮一峯老師的《SVG 圖像入門教程》。
二、學習 d3-selection 和 d3-scale 模塊
- d3-selection
該模塊便是用於操作 Document 的。
其中的 selection.data 和 selection.enter 是初次接觸較難理解，但必須掌握的概念。
掌握了這個模塊後，我們再回看阮一峯老師的教程，會發現教程中的例子，用 D3 實現起來是那麼的容易... - d3-scale
假如我們想在 800px * 600px 的畫布上繪製圖表，而我們數據的單位是百萬或更大時，這時便需用 d3-scale 將數據通過“比例尺”轉爲“合適值”以在畫布上作圖。
三、用 D3 做簡單的圖表
掌握了 SVG、d3-selecetion 和 d3-scale 後，就能開發柱狀圖、散點圖等基礎圖表了。
四、進階
用 D3 開發柱狀圖或散點圖，只需操作 SVG 的 <rect> 和 <circle> 基礎元素即可，非常簡單。
但如餅圖、堆積圖等其圖形結構用 SVG 的基礎元素並不能實現，此類圖表需使用 SVG 的 <path> 標籤。
因爲 SVG 的 <path> 理論上能繪製任意二維圖形，而 D3 則通過指定算法生成對應圖表 <path> 的 d 屬性值：如折線圖的 d3.line()、餅圖的 d3.pie()、堆積圖的 d3.stack() 等等。
這也爲什麼 D3 有這麼多 API 的一大原因了。
當我們明白這一原理後，學習 D3 便不會太過盲目，而在懂得其核心思想後，需要開發哪類圖表，再有針對性地研究、學習其 API 和對應圖表的數據結構等知識即可。
另外，Search the Bl.ocks 上包含各類 D3 的 Demo，可供參考。
關於 D3 的版本
D3 最新(2018年12月)版本爲 V5.x.x
D3 在從 V3 升級至 V4，其 API 命名有大量調整；同時 V4 在模塊化和 API 命名的“表達性”上都有着很多值得學習的地方，所以建議直接學 V4 或 V5 版本。（關於其模塊化和 API 的設計理念，可看 D3 作者的文章 - 《What Makes Software Good?》）
另外，V5 版本的改動主要是將 V4 中的異步方式改爲了 Promise，所以 V5 和 V4 在使用上差異並不大。
最後，再次把這張圖貼出來：
從圖中，可以看出，D3 可做的事兒遠不止於數據可視化。(詳細請看《D3 is not a Data Visualization Library》)
所以，將 D3 學好，可謂是在前端開發中，更填一大利器！
圖片源自《D3 is not a Data Visualization Library》