編者按：Google數(shù)據(jù)可視化工程師Ian Johnson指引了入門(mén)d3.js的門(mén)徑。

d3是一個(gè)豐富、廣闊，有時(shí)危險(xiǎn)的學(xué)習(xí)領(lǐng)域。d3的API文檔上長(zhǎng)長(zhǎng)的函數(shù)列表也許嚇壞了你，d3主頁(yè)上列出的幾十篇教程也許讓你難以選擇。有超過(guò)兩萬(wàn)個(gè)d3示例可供學(xué)習(xí)，但你永遠(yuǎn)不知道給定的示例是否容易理解。

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

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

溝通復(fù)雜概念

圖片來(lái)源：r2d3

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

不過(guò)不要僅僅艷羨別人，你需要樹(shù)立自己的雄心壯志，這是最重要的事情之一。我從一些使用d3.js的頂尖數(shù)據(jù)可視化從業(yè)者的訪談那里學(xué)到的是，最佳學(xué)習(xí)方法之一是預(yù)想你真心想要?jiǎng)?chuàng)建的東西，然后弄清楚創(chuàng)建它你需要做什么。

可視化表示

D3并沒(méi)有引入新的可視化表示。不同于Processing、Rapha?l、Protovis，D3的圖形記號(hào)詞匯直接來(lái)自于web標(biāo)準(zhǔn)：HTML、SVG、CSS。

-- http://d3js.org

圖表不過(guò)是內(nèi)有形狀的矩形。d3提供了方法，通過(guò)操作圖形記號(hào)或創(chuàng)建自己的形狀來(lái)定義你自己的可視化表示。d3使加入視覺(jué)交互和聲明可視化行為變得容易。你將在這里學(xué)習(xí)表達(dá)不可能使用其他媒介表達(dá)的東西。

如果你想要了解這些不同類(lèi)型的記號(hào)背后的原則，還有人們使用的不同種類(lèi)的圖形表示，不要錯(cuò)過(guò)Grammar of Graphics一書(shū)。

不過(guò)不用擔(dān)心，僅僅基于圓圈、矩形和仔細(xì)的布局，你就可以創(chuàng)建海量有創(chuàng)意的東西。從簡(jiǎn)單的東西開(kāi)始，總是嘗試讓屏幕顯示點(diǎn)什么，然后基于這個(gè)原型開(kāi)始正式創(chuàng)建過(guò)程。

基于web

圖片來(lái)源：visualcinnamon.com

使用d3.js的原因之一是你可以立刻和任何使用web瀏覽器的人（地球上至少一半人?。┓窒碜髌?。這意味著在開(kāi)始調(diào)用d3 API函數(shù)前，你需要了解SVG、HTML、CSS基礎(chǔ)。如果你想渲染大量數(shù)據(jù)，那么你大概也會(huì)想要學(xué)一點(diǎn)Canvas（別擔(dān)心，某種程度上說(shuō)，它實(shí)際上比SVG要好學(xué)）。掌握了d3和Canvas的基礎(chǔ)后，我推薦lars verspohl寫(xiě)的D3 and Canvas in 3 steps這篇出色的中級(jí)教程。

至于SVG，我推薦你從Scott Murray的SVG primer開(kāi)始，這篇簡(jiǎn)短易讀的教程介紹了SVG的初步知識(shí)。建議你親自動(dòng)手試驗(yàn)，手工創(chuàng)建SVG元素，看看它們是如何工作的。你可以使用BlockBuilder這樣的工具快速上手，無(wú)需配置任何開(kāi)發(fā)環(huán)境。另外，你可能需要參考MDN上的SVG文檔。掌握了基礎(chǔ)之后，推薦閱讀Nadieh Bremer的SVG beyond mere shapes。

blockbuilder.org

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

• 函數(shù)
  函數(shù)

  +關(guān)注

  關(guān)注

  3

  文章

  4346

  瀏覽量

  62968
• 可視化
  可視化

  +關(guān)注

  關(guān)注

  1

  文章

  1200

  瀏覽量

  21033