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

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

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

譯文：關(guān)于這一話題的一些想法：我在各種工作坊和訓(xùn)練營中教過將近300位教員、員工、學(xué)生，這些人大部分都有碩士、博士文憑。我將在下面列出為何D3難以學(xué)習(xí)的一些關(guā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ù)可視化的知識。相反，我想要強調(diào)d3是一個基于web溝通復(fù)雜的數(shù)據(jù)驅(qū)動的概念的工具箱。

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

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

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

這是問題的開始，因為有人聽說是用d3做的，就會想“噢，我應(yīng)該去學(xué)d3”。他們?nèi)タ戳丝次臋n，結(jié)果發(fā)現(xiàn)：

D3的API

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

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

設(shè)計師

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

哪部分是JavaScript？哪部分是d3？什么是異步請求？什么是DOM？

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

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

分析師

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

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

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

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

軟件工程師

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

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

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

銀彈

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

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

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

有時候你只需要這一件工具

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

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

我過去一段時間訪談過幾個數(shù)據(jù)可視化從業(yè)人員，他們在嘗試表達自己的數(shù)據(jù)集的過程中學(xué)習(xí)了d3. 這些人的共同點在于他們在開始學(xué)習(xí)時就有明確的目標(biāo)。在達成目標(biāo)的過程中，他們學(xué)了d3中所需的部分。

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

祝你好運，期待早日看到你的可視化作品！

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