編者按：Google數據可視化工程師Ian Johnson澄清了關于d3.js的一些誤解，并為不同技術背景的人設計了專門的學習路線。

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

譯文：D3的問題在于，為了創建可視化，你必須同時深刻理解SVG、DOM、JavaScript、幾何學、色彩空間、數據結構、標準模型和量子物理。

譯文：關于這一話題的一些想法：我在各種工作坊和訓練營中教過將近300位教員、員工、學生，這些人大部分都有碩士、博士文憑。我將在下面列出為何D3難以學習的一些關鍵原因（萬一有人正學習D3或對此好奇）……

這些討論的關鍵誤解在于將d3和數據可視化混為一談。想做數據可視化，必須學習和使用d3的所有功能，想要學習d3必須學習所有關于數據可視化的知識。相反，我想要強調d3是一個基于web溝通復雜的數據驅動的概念的工具箱。

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

伊姆斯設計的椅子

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

這是問題的開始，因為有人聽說是用d3做的，就會想“噢，我應該去學d3”。他們去看了看文檔，結果發現：

D3的API

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

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

設計師

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

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

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

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

分析師

分析師早已習慣處理數據，編寫查詢，基于復雜的API調用強力函數。他們在RStudio或Jupyter Notebook這樣強大的環境中構建自己的工作流。分析師學習d3最可能的原因是想要以某種方式發布自己的分析。盡管分析師通常比設計師更擅長編程，他們不太可能熟悉web瀏覽器環境下的編程生態：

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

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

我常常鼓勵分析師在開始階段忽略d3的大量工具函數，因為他們一般已經熟悉自己的環境中的強力函數。相反，我認為分析師最好重點關注如何將數據導出為易于使用的JSON或CSV格式（最好和現有例子匹配）。

軟件工程師

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

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

我還想強調將數據的可視化和布局分離開來。軟件工程師可以使用d3-hierarchy生成數據結構，然后用自己習慣使用的框架渲染成DOM。

銀彈

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

我個人認為web標準是所有溝通的最小公分母。web的圖形API并不理想，但如果你想將數據驅動的體驗即時分享給數億人，那么付出學習曲線相對陡峭的代價是合理的。2D圖形、視覺設計、用戶體驗設計、信息架構、編程都可以直接遷移至數據可視化之外的領域。

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

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

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

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

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

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

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

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