關(guān)于d3.js的一些誤解，為不同技術(shù)背景的人設(shè)計(jì)了專(zhuān)門(mén)的學(xué)習(xí)路線

編者按：Google數(shù)據(jù)可視化工程師Ian Johnson澄清了關(guān)于d3.js的一些誤解，并為不同技術(shù)背景的人設(shè)計(jì)了專(zhuān)門(mén)的學(xué)習(xí)路線。

最近推特上有不少關(guān)于學(xué)習(xí)d3.js很困難的討論。我在聚會(huì)、會(huì)議、工作坊、郵件列表、slack聊天中也遇到過(guò)許多類(lèi)似的討論。盡管我認(rèn)為許多困難是真實(shí)存在的，但是這次的討論中有一個(gè)很突出的誤解，我認(rèn)為需要澄清一下，這有助于開(kāi)始學(xué)習(xí)數(shù)據(jù)可視化的人。

譯文：D3的問(wèn)題在于，為了創(chuàng)建可視化，你必須同時(shí)深刻理解SVG、DOM、JavaScript、幾何學(xué)、色彩空間、數(shù)據(jù)結(jié)構(gòu)、標(biāo)準(zhǔn)模型和量子物理。

譯文：關(guān)于這一話題的一些想法：我在各種工作坊和訓(xùn)練營(yíng)中教過(guò)將近300位教員、員工、學(xué)生，這些人大部分都有碩士、博士文憑。我將在下面列出為何D3難以學(xué)習(xí)的一些關(guān)鍵原因（萬(wàn)一有人正學(xué)習(xí)D3或?qū)Υ撕闷妫?/p>

這些討論的關(guān)鍵誤解在于將d3和數(shù)據(jù)可視化混為一談。想做數(shù)據(jù)可視化，必須學(xué)習(xí)和使用d3的所有功能，想要學(xué)習(xí)d3必須學(xué)習(xí)所有關(guān)于數(shù)據(jù)可視化的知識(shí)。相反，我想要強(qiáng)調(diào)d3是一個(gè)基于web溝通復(fù)雜的數(shù)據(jù)驅(qū)動(dòng)的概念的工具箱。

我希望讀者能對(duì)d3在基于web的數(shù)據(jù)可視化中的角色有一個(gè)更全面的了解。讓我們用下Miles McCrocklin的譬喻，數(shù)據(jù)可視化就像制作家具?；诟鞣N各樣的原因，各種各樣的人都可能想要做家具，特別是當(dāng)他們看到別人制作的精美家具之后：

伊姆斯設(shè)計(jì)的椅子

人們看到了令人印象深刻的可視化之后，很自然地想要擁有自己制作的能力，他們會(huì)問(wèn)這是怎么做的，然后經(jīng)常聽(tīng)到“這是用d3做的”。

這是問(wèn)題的開(kāi)始，因?yàn)橛腥寺?tīng)說(shuō)是用d3做的，就會(huì)想“噢，我應(yīng)該去學(xué)d3”。他們?nèi)タ戳丝次臋n，結(jié)果發(fā)現(xiàn)：

D3的API

許多工具看起來(lái)讓人摸不著頭腦，它們需要關(guān)于木工的知識(shí)，還有關(guān)于我們從未接觸過(guò)甚或不知道需要考慮的一些流程的知識(shí)。我們感到無(wú)所適從，看起來(lái)觸手可及的東西，學(xué)習(xí)路線卻是如此漫長(zhǎng)，如此變幻莫測(cè)。

我相信，這正是我們可以改進(jìn)的地方，相比修改工具集，我們應(yīng)該根據(jù)人們的目標(biāo)為他們指引更合適的路徑。讓我們查看下人們可能想要制作交互式數(shù)據(jù)可視化的一些常見(jiàn)情況，以及相應(yīng)的路線。

設(shè)計(jì)師

設(shè)計(jì)師早已習(xí)慣用視覺(jué)形式交流想法，他們知道如何分解復(fù)雜問(wèn)題，并映射至相關(guān)概念。他們掌握了一組增強(qiáng)表達(dá)頭腦中想法的能力的工具。他們常常不怎么熟悉編程，也許對(duì)基本的HTML和CSS有所了解，可以做出靜態(tài)頁(yè)面。當(dāng)他們接觸d3代碼時(shí)，往往非常困惑：

哪部分是JavaScript？哪部分是d3？什么是異步請(qǐng)求？什么是DOM？

對(duì)設(shè)計(jì)師而言，d3提供了強(qiáng)大的能力和靈活性，但他們首先必須學(xué)習(xí)一些基礎(chǔ)的技能。我經(jīng)常推薦Scott Murray的d3教程（還有他寫(xiě)的Interactive Data Visualization for the Web一書(shū)）。其中介紹了基本的HTML、CSS、JavaScript概念。我同樣建議設(shè)計(jì)師試著從Illustrator和Sketch等設(shè)計(jì)工具中導(dǎo)出SVG，然后加上交互功能和數(shù)據(jù)功能。

我經(jīng)常鼓勵(lì)設(shè)計(jì)師在開(kāi)始階段不必太在意進(jìn)入/更新/退出模式，復(fù)用性和性能。集中精力制作想要的效果會(huì)更有幫助，一旦你差不多做出了想要的效果，會(huì)有很多友好的同事幫助你改善代碼的性能和魯棒性。

分析師

分析師早已習(xí)慣處理數(shù)據(jù)，編寫(xiě)查詢(xún)，基于復(fù)雜的API調(diào)用強(qiáng)力函數(shù)。他們?cè)?a href="http://ttokpm.com/tags/rs/" target="_blank">RStudio或Jupyter Notebook這樣強(qiáng)大的環(huán)境中構(gòu)建自己的工作流。分析師學(xué)習(xí)d3最可能的原因是想要以某種方式發(fā)布自己的分析。盡管分析師通常比設(shè)計(jì)師更擅長(zhǎng)編程，他們不太可能熟悉web瀏覽器環(huán)境下的編程生態(tài)：

SVG和Canvas的區(qū)別是什么？JavaScript下等價(jià)于Pandas/Tidy的是什么？我為什么不能用SVG的線繪制線圖？路徑的“d”屬性是什么？

我同樣建議分析師了解下web開(kāi)發(fā)的初步知識(shí)，以熟悉DOM之類(lèi)的概念。同樣，我推薦Scott Murray的d3教程（還有他寫(xiě)的Interactive Data Visualization for the Web一書(shū)）。另外，我也推薦分析師參加一門(mén)JavaScript和JSON的速成課程，從他們通常使用的環(huán)境中導(dǎo)出JSON，以便在瀏覽器中進(jìn)行可視化。

我常常鼓勵(lì)分析師在開(kāi)始階段忽略d3的大量工具函數(shù)，因?yàn)樗麄円话阋呀?jīng)熟悉自己的環(huán)境中的強(qiáng)力函數(shù)。相反，我認(rèn)為分析師最好重點(diǎn)關(guān)注如何將數(shù)據(jù)導(dǎo)出為易于使用的JSON或CSV格式（最好和現(xiàn)有例子匹配）。

軟件工程師

軟件工程師是一個(gè)很有趣的情形，因?yàn)楸M管他們具備了web開(kāi)發(fā)的基礎(chǔ)技能和知識(shí)，但d3的部分工具的思維方式與此不同：什么是進(jìn)入/更新/退出模式？為何d3要搞亂我的DOM？轉(zhuǎn)換……我該如何做單元測(cè)試呢？

許多開(kāi)發(fā)者非常熟悉DOM和JavaScript，所以我的建議是實(shí)際上手試驗(yàn)。軟件工程師可以忽略d3圍繞DOM的部分，轉(zhuǎn)而去熟悉用于數(shù)據(jù)可視化的一些關(guān)鍵工具，比如d3-scale。D3分為很多小模塊，所以挑選你想要使用的功能相當(dāng)簡(jiǎn)單。

我還想強(qiáng)調(diào)將數(shù)據(jù)的可視化和布局分離開(kāi)來(lái)。軟件工程師可以使用d3-hierarchy生成數(shù)據(jù)結(jié)構(gòu)，然后用自己習(xí)慣使用的框架渲染成DOM。

銀彈

上面這些情形是大概的原型，許多人的情況位于它們之間。主要思路是分清楚目標(biāo)和限制，這樣可以更好地引導(dǎo)各種各樣的人入門(mén)d3.

我個(gè)人認(rèn)為web標(biāo)準(zhǔn)是所有溝通的最小公分母。web的圖形API并不理想，但如果你想將數(shù)據(jù)驅(qū)動(dòng)的體驗(yàn)即時(shí)分享給數(shù)億人，那么付出學(xué)習(xí)曲線相對(duì)陡峭的代價(jià)是合理的。2D圖形、視覺(jué)設(shè)計(jì)、用戶(hù)體驗(yàn)設(shè)計(jì)、信息架構(gòu)、編程都可以直接遷移至數(shù)據(jù)可視化之外的領(lǐng)域。

不過(guò)，有時(shí)候椅子不過(guò)是一個(gè)坐的地方，我們沒(méi)有時(shí)間和精力要求太多，去IKEA買(mǎi)一個(gè)就行！在這些情形下，有很多現(xiàn)成的制圖庫(kù)，它們只需要稍微配置下即可使用。

有時(shí)候你只需要這一件工具

Elijah Meeks制作了一份出色的d3 API地圖，分類(lèi)介紹d3工具箱的API：https://medium.com/%40Elijah_Meeks/d3-is-not-a-data-visualization-library-67ba549e8520

我也忍不住想推薦下我寫(xiě)的d3.js漫游指南，其中列出了我心目中d3的基本概念。

我過(guò)去一段時(shí)間訪談過(guò)幾個(gè)數(shù)據(jù)可視化從業(yè)人員，他們?cè)趪L試表達(dá)自己的數(shù)據(jù)集的過(guò)程中學(xué)習(xí)了d3. 這些人的共同點(diǎn)在于他們?cè)陂_(kāi)始學(xué)習(xí)時(shí)就有明確的目標(biāo)。在達(dá)成目標(biāo)的過(guò)程中，他們學(xué)了d3中所需的部分。

所以，明確自己的目標(biāo)，繪制數(shù)據(jù)可視化的廣袤世界中自己的路線。你可以使用Blockbuilder搜索找到別人為你照亮的一些小徑，在Observable中試驗(yàn)JavaScript效果，并在slack上加入超過(guò)3000個(gè)椅子匠——呃，我指的是數(shù)據(jù)可視化從業(yè)者——的d3頻道。

祝你好運(yùn)，期待早日看到你的可視化作品！

感謝Erik Hazzard、Kerry Rodden、Zan Armstrong、Yannick Assogba、Adam Pearce、Nadieh Bremer給這篇文章的反饋意見(jiàn)。