編者按：Google數據可視化工程師Ian Johnson指引了入門d3.js的門徑。

d3是一個豐富、廣闊，有時危險的學習領域。d3的API文檔上長長的函數列表也許嚇壞了你，d3主頁上列出的幾十篇教程也許讓你難以選擇。有超過兩萬個d3示例可供學習，但你永遠不知道給定的示例是否容易理解。

如果你需要的只是快速實現柱狀圖或線圖，也許這篇文章不適合你，有大量制作圖表的庫可用。如果你更喜歡看書，那么Scott Murray的Interactive Data Visualization for the Web是一個很好的起點，而Elijah Meeks的D3.js in Action比較全面地深入了部分API.

我希望這篇指南能幫助你在心智上做好理解d3的準備，并指出一些值得探索的方向。除了d3.js的API外，還有很多需要學習，既包括web標準方面的技術知識，例如HTML、SVG、CSS、JavaScript，也包括溝通概念和數據可視化原則。你大概已經對此有所了解，所以這篇指南試圖為你提供一個良好的起點，幫助你學習更多你想要深入的內容。

溝通復雜概念

圖片來源：r2d3

在我們深入數據可視化原則和技術之前，先讓我們花點時間樹立下雄心壯志。有許多驚人的例子展現了d3的可能性，包括紐約時報文章、r2d3、distill.pub、datasketch|es、polygrah、ncase。如果我這里遺漏了什么，請留言告知。

不過不要僅僅艷羨別人，你需要樹立自己的雄心壯志，這是最重要的事情之一。我從一些使用d3.js的頂尖數據可視化從業者的訪談那里學到的是，最佳學習方法之一是預想你真心想要創建的東西，然后弄清楚創建它你需要做什么。

可視化表示

D3并沒有引入新的可視化表示。不同于Processing、Rapha?l、Protovis，D3的圖形記號詞匯直接來自于web標準：HTML、SVG、CSS。

-- http://d3js.org

圖表不過是內有形狀的矩形。d3提供了方法，通過操作圖形記號或創建自己的形狀來定義你自己的可視化表示。d3使加入視覺交互和聲明可視化行為變得容易。你將在這里學習表達不可能使用其他媒介表達的東西。

如果你想要了解這些不同類型的記號背后的原則，還有人們使用的不同種類的圖形表示，不要錯過Grammar of Graphics一書。

不過不用擔心，僅僅基于圓圈、矩形和仔細的布局，你就可以創建海量有創意的東西。從簡單的東西開始，總是嘗試讓屏幕顯示點什么，然后基于這個原型開始正式創建過程。

基于web

圖片來源：visualcinnamon.com

使用d3.js的原因之一是你可以立刻和任何使用web瀏覽器的人（地球上至少一半人?。┓窒碜髌贰＿@意味著在開始調用d3 API函數前，你需要了解SVG、HTML、CSS基礎。如果你想渲染大量數據，那么你大概也會想要學一點Canvas（別擔心，某種程度上說，它實際上比SVG要好學）。掌握了d3和Canvas的基礎后，我推薦lars verspohl寫的D3 and Canvas in 3 steps這篇出色的中級教程。

至于SVG，我推薦你從Scott Murray的SVG primer開始，這篇簡短易讀的教程介紹了SVG的初步知識。建議你親自動手試驗，手工創建SVG元素，看看它們是如何工作的。你可以使用BlockBuilder這樣的工具快速上手，無需配置任何開發環境。另外，你可能需要參考MDN上的SVG文檔。掌握了基礎之后，推薦閱讀Nadieh Bremer的SVG beyond mere shapes。

blockbuilder.org

你不用直接使用SVG制作可視化，使用d3操作

• 函數
  函數

  +關注

  關注

  3

  文章

  4368

  瀏覽量

  64180
• 可視化
  可視化

  +關注

  關注

  1

  文章

  1243

  瀏覽量

  21631