注：本文有點(diǎn)長，可以點(diǎn)贊??收藏后慢慢看。另外有本文未涉及的、大家覺得不錯(cuò)的D3.js資源教程也歡迎評(píng)論進(jìn)行分享。

前言

從「年更博主冒個(gè)泡，或?qū)㈤_啟可視化之旅 - 牛衣古柳 - 2020.08.27」一文至今，已經(jīng)過去整整10個(gè)月，期間古柳實(shí)踐過一些demo、復(fù)現(xiàn)過一些作品、寫過一些(沒人看的)文章、也一點(diǎn)點(diǎn)將可視化交流群“運(yùn)營”到了大概550多人。

其實(shí)群里蠻早就有人問 D3.js 如何學(xué)習(xí)、求 D3.js 教程、問有啥推薦書籍等，雖然沒統(tǒng)計(jì)過，但目測十多次看到這些問題還是有的，古柳也推薦過很多次自己覺得不錯(cuò)的資源，論理應(yīng)該寫篇文章整理分享下，這樣以后再有人問起，直接分享文章就行，就不用每次重復(fù)在群里貼那些資源鏈接，而且還無法解釋太多。但一直沒動(dòng)手，一拖就到了現(xiàn)在。

雖然過去那么久，但接觸過并想推薦的還是以下幾個(gè)資源，畢竟最核心搞懂 D3.js 到底是如何進(jìn)行可視化的，掌握了流程、步驟、原理，再去看其他例子或作品源碼，就好上手多了，也不至于被網(wǎng)上各種風(fēng)格、不同實(shí)現(xiàn)流程的代碼帶偏。

古柳也知道很多人的背景都不太一樣，有懂技術(shù)的有不懂技術(shù)的、有會(huì)前端的有不會(huì)前端的、有更偏向中文資源有中英都能接受的...接下來推薦的資源不一定能讓對(duì) D3.js 可視化感興趣的每個(gè)人都覺得有用，但確實(shí)覺得還不錯(cuò)，就姑且先整理出來，大家有其他補(bǔ)充的優(yōu)質(zhì)資源也歡迎評(píng)論留言或群里分享。

基礎(chǔ)部分

首先，D3.js 畢竟是一個(gè) JavaScript 庫，也是前端里的一部分，所以必要的 HTML、CSS、JS 等基礎(chǔ)先過一遍，對(duì)后續(xù)學(xué)習(xí) D3.js 會(huì)有極大幫助，而且都2021年了，最好順帶學(xué)下 ES6，箭頭函數(shù)、模板字符串之類用起來也簡潔些，畢竟很多例子里也都那么寫的，不至于看到犯懵。當(dāng)然如果不是一上來就奔著專業(yè)前端去的，可以先不用學(xué)得太深，像 JS 里數(shù)組、對(duì)象、函數(shù)、循環(huán)、條件判斷、async await這些基本掌握就差不多了，可以進(jìn)入下一步 SVG 和 D3.js 的學(xué)習(xí)。

這里推薦古柳去年學(xué)的B站 后盾人教程，首先 HTML、CSS、JS 都有系列視頻，依次學(xué)習(xí)即可。較之其他很多視頻里廢話連篇、內(nèi)容冗長，古柳比較喜歡向軍大叔每一課時(shí)都簡短干練，讓人能較輕松堅(jiān)持下去，同時(shí)整個(gè)體系又很完整全面。

當(dāng)然需要重復(fù)一句，JS 部分可能前幾章(比如到第4章數(shù)組即可)看完就暫時(shí)夠用了，如果是新手，想先體驗(yàn) D3.js 可視化的，后面大部分章節(jié)其實(shí)可以先放放，以免在這里扎太深、折騰太久、越學(xué)越頭禿，然后放棄了。

D3.js 部分

打完基礎(chǔ)，就可以開始看 D3.js，其實(shí)網(wǎng)上相關(guān)資源并不少，中文的也都有些，只不過網(wǎng)上很多例子是不同時(shí)間寫的，可能用的 D3.js v3/v4/v5 等不同版本，API 略有變化，導(dǎo)致不明真相的新手直接照著實(shí)現(xiàn)可能出現(xiàn)報(bào)錯(cuò)。

雖然古柳覺得 v4 以后應(yīng)該就沒那么大差異，但大家還是多留意下 <script src="..."> 里引用的到底是哪個(gè)版本的 D3.js。古柳用的比較多的是 v5.9 以上的，大部分情況下都?jí)蛴?，不一定非得用最新?v6/v7 等。

Fullstack D3 and Data Visualization

如果要問哪個(gè)資源對(duì)古柳入門 D3.js 可視化幫助最大，那毫無疑問是 「TheRobBrennan/explore-data-visualization-with-D3」 這個(gè) GitHub 倉庫的代碼。

這是 Amelia Wattenberger 的 「Fullstack D3 and Data Visualization」 一書的配套代碼，有各章節(jié)例子的完整實(shí)現(xiàn)。去年古柳也是因?yàn)橹览锩嬗袀€(gè)動(dòng)態(tài)桑吉圖的實(shí)現(xiàn)，于是搜 Animated Sankey Chart 才找到倉庫(總覺得不是原作者開源的，而是別人偷偷公開的，不確定)，不過實(shí)現(xiàn)挺復(fù)雜一直還沒啃掉。

之所以推薦這個(gè)是因?yàn)槔锩嫣岬?code>用 D3.js 畫任何圖的通用七個(gè)步驟，也就是下面的繪圖步驟清單/Chart drawing checklist。并且倉庫里每個(gè)例子都是這樣的步驟，雖然不一定每個(gè)圖里都會(huì)用到全部七個(gè)步驟，但是明白掌握這樣的流程框架，對(duì)于入門 D3.js 可視化會(huì)有特別大的幫助。

古柳也能想到大家剛接觸 D3.js 時(shí)多半先看到的都是實(shí)現(xiàn)柱形圖/散點(diǎn)圖/折線圖等圖表，明明用其他工具或 Echarts 可視化庫等會(huì)很方便就搞定，但是 D3.js 里卻一堆新概念，需要花很大力氣才能實(shí)現(xiàn)：scale 比例尺、enter append 綁定數(shù)據(jù)后進(jìn)行元素繪制、x/y 坐標(biāo)需要指定、axis 坐標(biāo)軸/刻度/軸名、legend 圖例、標(biāo)題所有這些全都需要代碼里寫出來才能畫出來。

“那么簡單基礎(chǔ)的圖都這么麻煩，復(fù)雜的圖表怕是實(shí)現(xiàn)難度更高吧？”

想來不少人應(yīng)該都有過這樣的想法吧？有這樣的看法實(shí)在很正常，但古柳作為一個(gè)姑且復(fù)現(xiàn)過一些大家之前沒接觸過、看著似乎蠻復(fù)雜的可視化作品的實(shí)踐者，可以拍著胸脯說，復(fù)雜圖表的實(shí)現(xiàn)流程大體上其實(shí)和簡單圖表的步驟是一樣的，掌握了上面七個(gè)步驟，相信大家也有能力復(fù)現(xiàn)出這樣漂亮的作品。見：Wendy Shijia 的「 Escher's Gallery」可視化作品復(fù)現(xiàn)系列文章(三) - 牛衣古柳 2020-12-17

所以古柳非常推薦大家有一定基礎(chǔ)后，抽一段時(shí)間每天照上面?zhèn)}庫里的例子敲下，相信會(huì)大有益處，而且也有助于養(yǎng)成代碼風(fēng)格，不至于被網(wǎng)上各種不同寫法的例子迷了眼。

另外 Amelia 在 Observable 上的 「Prototyping in D3」 里也總結(jié)過這個(gè)流程，不過上面的 JS 寫法略有不同，后續(xù)古柳基于幾個(gè)步驟，看看舉什么有意思些的可視化作品例子也來講解下。

此外，newline 上有 Amelia 的付費(fèi)視頻教程和電子書，雖然不便宜且是英文的，但能接受的可以去學(xué)下。昨晚整理資源時(shí)才發(fā)現(xiàn)網(wǎng)站會(huì)檢測大家來自哪，然后自動(dòng)打不小折扣，聽貼心的，古柳的是中國打折45%，群友中國香港打折49%，還有俄羅斯的打折70%，不禁懷疑難道折扣越大被識(shí)別出來越窮是吧，挺有意思的一個(gè)插曲。

Intro to D3

最后 Amelia 個(gè)人網(wǎng)站上的 「Intro to D3」 系列也可以一看。

花了挺長篇幅介紹上面的資源，但畢竟古柳真心從中受益匪淺，所以就話嘮多寫了些。下面再介紹些其他資源。

Shirley Wu 的 Introduction to SVG and D3.js

談到 D3.js 可視化，一定繞不開 Shirley Wu，同樣她的 「Introduction to SVG and D3.js」 系列也非常推薦一看，Shirley 拿自己的作品 「film flowers」 來教大家如何一步步實(shí)現(xiàn)出來。

說來慚愧古柳至今都沒怎么看完，不過之前做“傻蘋果??”相關(guān)的可視化時(shí)需要用到貝塞爾曲線畫蘋果花，那會(huì)有找來參考過，見：「用可視化的方式祝福小偶像畢業(yè)快樂（上） - 牛衣古柳 2021-04-20」。

另外兩個(gè)網(wǎng)站

另外，「D3 in Depth」 和 「The D3.js Graph Gallery」 兩個(gè)網(wǎng)站都不錯(cuò)，古柳有時(shí)需要用到什么，也會(huì)在上面看看有無對(duì)應(yīng)例子可以參考。

視頻教程

再推薦下視頻教程。B站上有清華計(jì)算機(jī)系的課程「數(shù)據(jù)可視化編程-使用D3.js」，用的 D3.js v5.9 + ES6 就不必說了，而且?guī)缀跏悄壳拔ㄒ坏?D3.js 中文視頻教程，并且感覺也不太可能會(huì)有其他新教程的樣子(除非哪天古柳也開始出教程了，其實(shí)一直有這想法，不過時(shí)機(jī)還不成熟)。推薦有一定基礎(chǔ)再看，另外不需要像課程里用 Flask 搭 Web 服務(wù)，直接 VSCode 里裝個(gè) live server 即可。
課件與代碼：https://github.com/Shao-Kui/D3.js-Demos

一年多前古柳在B站刷到這門課時(shí)還是很驚喜的，雖然最終也沒怎么完全刷完，而是結(jié)合其他上面的資源一點(diǎn)點(diǎn)掌握了 D3.js，但可能沒有這門課、沒有一年多前下定決心學(xué)起可視化，也許就不會(huì)有寫的這些文章、不會(huì)有現(xiàn)在的「可視化交流群」、不會(huì)有認(rèn)識(shí)那么多人了，還是很感慨的。

另外，B站還有一門 「數(shù)據(jù)可視化教程@基于D3.js」，是有 Up主 搬運(yùn) Curran Kelleher 的油管視頻，這是2018年版本的。

油管上還有2020年版本，以及目前正在更新的2021年版本——「Get it Right in Black & White」
鏈接：https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/

Learn D3.js

已經(jīng)推薦了不少資源，其實(shí)大家找準(zhǔn)一個(gè)適合自己的好好學(xué)學(xué)，應(yīng)該都能入門。最后古柳再推薦下 「Learn D3.js」 這本書，其實(shí) D3.js 中文書也有幾本，但都不夠新(雖然也沒怎么看過)，而這本不僅用的 v5.9 + ES6，而且是古柳所知講 D3.js 最全面細(xì)致的一書。感興趣的可「牛衣古柳」后臺(tái)回復(fù)「d3 book」獲取 PDF 版(侵刪)。
鏈接：https://github.com/PacktPublishing/Learn-D3.js

其實(shí)古柳也在想除了現(xiàn)在日常可視化交流群之外，還有什么是自己能提供的，比如要不要做個(gè) D3.js 學(xué)習(xí)打卡群，一起學(xué)習(xí)這本書之類？但還沒想清楚，也不知道會(huì)有多少人感興趣，可以留言評(píng)論看看。

以上就是這次的整理分享，一不小心寫得又臭又長，希望能對(duì)一些人有幫助。