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