在數(shù)據(jù)可視化的世界中谈息，D3 可謂極其耀眼的明星。
很多人著迷于 D3 那近乎無限可能的圖形開發(fā)能力凛剥，而又被 D3 那海量的 API 所困住侠仇，往往學(xué)了很久卻不得其道。
(還不了解 D3 的同學(xué)犁珠，可看《D3 vs G2 vs Echarts》)
下面逻炊，我以數(shù)據(jù)可視化開發(fā)為目的，說下我的 D3 入門路徑：
一犁享、學(xué)習(xí) SVG
D3 全名為 Data Drive Document余素，即通過 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è)模塊后，我們再回看阮一峰老師的教程彰檬，會(huì)發(fā)現(xiàn)教程中的例子渣聚，用 D3 實(shí)現(xiàn)起來是那么的容易... - d3-scale
假如我們想在 800px * 600px 的畫布上繪制圖表独榴，而我們數(shù)據(jù)的單位是百萬或更大時(shí)，這時(shí)便需用 d3-scale 將數(shù)據(jù)通過“比例尺”轉(zhuǎn)為“合適值”以在畫布上作圖奕枝。
三棺榔、用 D3 做簡單的圖表
掌握了 SVG、d3-selecetion 和 d3-scale 后隘道，就能開發(fā)柱狀圖症歇、散點(diǎn)圖等基礎(chǔ)圖表了。
四谭梗、進(jìn)階
用 D3 開發(fā)柱狀圖或散點(diǎn)圖忘晤，只需操作 SVG 的 <rect> 和 <circle> 基礎(chǔ)元素即可，非常簡單激捏。
但如餅圖设塔、堆積圖等其圖形結(jié)構(gòu)用 SVG 的基礎(chǔ)元素并不能實(shí)現(xiàn)，此類圖表需使用 SVG 的 <path> 標(biāo)簽远舅。
因?yàn)?SVG 的 <path> 理論上能繪制任意二維圖形闰蛔，而 D3 則通過指定算法生成對應(yīng)圖表 <path> 的 d 屬性值：如折線圖的 d3.line()、餅圖的 d3.pie()图柏、堆積圖的 d3.stack() 等等序六。
這也為什么 D3 有這么多 API 的一大原因了。
當(dāng)我們明白這一原理后蚤吹，學(xué)習(xí) D3 便不會(huì)太過盲目例诀，而在懂得其核心思想后，需要開發(fā)哪類圖表裁着，再有針對性地研究繁涂、學(xué)習(xí)其 API 和對應(yīng)圖表的數(shù)據(jù)結(jié)構(gòu)等知識即可。
另外二驰，Search the Bl.ocks 上包含各類 D3 的 Demo爆土，可供參考。
關(guān)于 D3 的版本
D3 最新(2018年12月)版本為 V5.x.x
D3 在從 V3 升級至 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 在使用上差異并不大倔矾。
最后，再次把這張圖貼出來：
從圖中，可以看出哪自，D3 可做的事兒遠(yuǎn)不止于數(shù)據(jù)可視化丰包。(詳細(xì)請看《D3 is not a Data Visualization Library》)
所以，將 D3 學(xué)好壤巷，可謂是在前端開發(fā)中邑彪，更填一大利器！
