D3.js 漫遊指南

ssthouse發表於2018-06-12

原文網址 : https://juejin.im/post/5b1f4d416fb9a01e4c5485e3

原文: https://medium.com/@enjalot/the-hitchhikers-guide-to-d3-js-a8552174733a

譯文原始碼地址: https://github.com/ssthouse/d3-blog/blob/master/d3-guide/d3_roadmap_cn.md

如果這篇文章對你有幫助的話, 不妨點個贊 :tada:

github 地址: github.com/ssthouse/d3…

學習D3.js的旅途中看到的風景十分美妙, 壯麗有時甚至有些崎嶇. 你可能會被d3.js文件長長的function列表所嚇到(d3’s API documentation ), 或者被成堆的教程弄的疲憊不堪( dozens of tutorials). 這裡有超過兩萬個例子你可以用來學習: 20,000+ d3 examples , 但你不知道哪些是真正對你學習D3.js有幫助的.

如果你只是想要快速得到一個柱狀圖或者圖表, 那麼這篇文章可能不太適合你. 這裡有很多庫可以幫你做到這一點: plenty of charting libraries . 如果你更傾向於看書學習, 這本書也許是你不錯的起點 Interactive Data Visualization for the Web. Elijah Meeks 的 D3.js in Action 可以幫助你更好的瞭解D3的API.

這篇文章目的是讓你在思想上做好學習D3的準備, 並且提供一些接下來學習的方向. 除了對於D3本身API的學習, 關於web標準的HTML, SVG, CSS, Javascript 和資料視覺化的概念,標準都是需要學習的. 很有可能你已經知道上面這些中的一部分, 這篇文章旨在為你繼續學習提供一個好的起點.

[r2d3.us visual introduction to machine learning](http://www.r2d3.us/visual-intro-to-machine-learning-part-1/) sets the bar high

r2d3.us visual introduction to machine learning 設定了一個很高的起點

在我們進入資料視覺化和程式碼技巧的學習之前, 先讓我們看看一些能讓我們激發學習興趣的東西. 這裡有很多讓人驚歎的例子, 不妨點進去看一看, 並給自己設定一個學習目標: New York Times article, r2d3, distill.pub, datasketch|es, polygraph, ncase.

不要只是看看就好, 你可以給自己設定一個大一點的目標. 我從這篇文章中學習到, 最好的學習方式就是給自己設定一個想要完成的任務, 並且絞盡腦汁的去完成它: interviewing some of the top data visualization practitioners using d3.js .

圖形化的展現形式

D3 並沒有引入一種新的視覺展現形式. 不同於 Processing, Raphaël, 或者 Protovis, D3 圖形方面的詞彙都是直接來自於 web標準: : HTML, SVG, and CSS — http://d3js.org

Learning d3.js to write charts is like to learning French to write nutrition labels. To be fair, [@syntagmatic](https://twitter.com/syntagmatic) has made some beautiful [nutrition visualizations](http://bl.ocks.org/syntagmatic/2420080)

學習D3來寫圖表就像是學習法語來寫營養標籤. 公平的來說 , @syntagmatic 確實做出了非常不錯的營養標籤

圖表僅僅是內部有一些形狀的矩形. 而D3提供的是一種讓你通過操作圖示或者你自己定義的圖形來表達你想要展示資料的方式. 它讓你可以輕易地為你的圖形新增視覺化互動, 定義你的圖形有怎樣的行為. 你在D3中學到的將是一種視覺化的表達方式, 這是你在其他library中所得不到的.

如果你想要了解人們所用的不同種類的標記和圖形符號所遵循的準則, 你可以參考這本書: Grammar of Graphics.

不過不用擔心, 僅僅是用圓圈和矩形你就已經可以寫出無數具有創造力的作品了. 從簡單的事情做起, 先在螢幕上展示一些東西, 再慢慢優化它.

在Web展示上

[SVG Beyond Mere Shapes](https://www.visualcinnamon.com/2016/04/svg-beyond-mere-shapes.html) 是對web標準的圖形操作非常棒的展示

SVG Beyond Mere Shapes 是對web標準的圖形操作非常棒的展示

我們選擇D3的原因之一是: 你可以非常方便的將你的作品分享給任何有瀏覽器的人. 這意味著你需要對於HTML5有一個基本的瞭解. 在你開始學習D3的API之前, 你應該已經掌握 SVG, HMTL 和 CSS的基本知識. 如果有時間的話, 你最好看看這篇講Canvas的文章(如果你要展示的資料資料量非常大的話) learn some Canvas . 我推薦你也看看這篇, 它能幫你很好的將Canvas和D3結合使用 this is a great intermediate tutorial.

對於SVG, 我推薦看看這個簡短有趣的介紹 SVG primer 來自 Scott Murray. 使用工具: BlockBuilder 來迅速開始你的coding而不用費時配置開發環境. 你也可以看看MDN對於SVG的官方文件 MDN reference site for SVG. 等你掌握了SVG的基礎知識後, 你可以再看看這篇文章, 可以讓你對SVG有一個更深的理解 SVG beyond mere shapes 來自 Nadieh Bremer.

[http://blockbuilder.org](http://blockbuilder.org) makes it easy to play with web standards!

blockbuilder.org 讓你可以快速上手玩轉web圖形標準!

其實你甚至可以不用使用 SVG來進行圖形展示, 有時候直接用 div 就足以讓你做出想要的效果. 當然這要求你對 CSS 有較好的掌握: CSS positioning . 為了達到你想要的效果, 你甚至可以混用 HTML, SVG , Canvas!

開始學習 d3.js

d3js.org

你可能見過D3的API文件, 展示著成堆的Function: d3’s API, 幸運的是, 現在D3已經拆分為了一個個的模組, 所以我們從中挑選一些特別常用的來進行介紹.

d3-scale

[colors](http://blockbuilder.org/enjalot/f1ac6277c9b224ebf4daada75a06294d) are one common use of scales!

colors 是對於scale非常常見的一種使用方式

scales是D3中非常基礎的一個工具. 你可以從這裡對它有一個大概的瞭解: Introducing d3-scale 來自D3作者 Mike Bostock. 無論你做什麼樣的資料視覺化, 你都非常有可能用到一種或多種scale.

d3-shape

A [streamgraph](http://bl.ocks.org/mbostock/582915), thanks to SVG paths!

* streamgraph,感謝 SVG paths!*

SVG 的path非常冗雜 (see this thorough overview), 所以 d3-shape 提供了一些讓我們非常方便建立並操作SVG path的方法. 你可以看看 Mike 的 Introducing d3-shape 來了解它的作用並著手開始使用它. d3-shape 還可以幫助你在Canvas中繪製各種各樣的圖形, 你僅僅新增一行程式碼就能將SVG的path新增到Canvas中!

d3-selection

the General Update Pattern

D3中最難以理解的部分可能就是它的selection了, 同樣的, 看看D3作者的文章能讓你對D3的selection模型有一個更好的理解: General Update Pattern. 我花了好幾個月用腦袋錘桌子才最終理解了selection模型, 但是不要為此感到害怕! 你並不需要完完全全的掌握selection的所有api才能完成一份D3的作品. 當你做好了學習的準備, 你可以從這篇文章開始: d3-selections README. 還有, 請一定看看這篇文章, 非常有助於理解selection模型 Thinking in Joins.

d3-collection

d3-nest makes it easy to [group similar things together](https://bl.ocks.org/mbostock/9490313)

d3-nest 讓你可以非常輕鬆的將相似的資料歸結在一起

運算元據是資料視覺化中非常重要的步驟. 有時候這甚至是最困難的一部 (如果你的資料集不是很完美, 或者你對它沒有很好的理解). 雖然有很多可以幫助進行資料處理的工具, 這裡我還是推薦看看d3 collection d3-collection,特別是這個模組: nest function.

d3-hierarchy

* Treemap 感謝 d3-hierarchy*

接著上面對於 資料操作 的討論. 在很多資料視覺化中, 按照資料的結構對其進行相應的展示是非常關鍵的一點. 你可以在這裡找到很多工具Function, 它們能幫你很方便的進行這樣的資料處理: d3-hierarchy 繪製樹狀結構的資料.

d3-zoom

zooming is fun!

縮放是一種非常常見的資料視覺化互動, D3的作者 Mike 給出了一系列的例子展示如何將縮放功能引入你的資料視覺化作品中 d3-zoom. 你也可以看看和 縮放 非常類似的一種操作 拖拽 d3-drag

d3-force

sparse matrices

D3中非常讓人們感到驚豔的功能之一是 d3 force layout. 它非常容易上手使用, 但是很難真正掌握. 詳細資訊請參考: d3-force.

搜尋!

最後一個tip: 你可以在這個網址對任何API Function搜尋使用案例: BlockBuilder’s search.你甚至可以將你的搜尋範圍限定版本的d3上!

look at all those blocks!

D3社群

Blockiverse

和志同道合的人們聯絡起來! 你可以加入我們的slack channel: d3.js slack channel. 或者找到和你最近的D3線下活動: https://www.meetup.com/topics/d3-js/). 如果你對D3非常狂熱的話, 來參加SF每年秋天的聚會吧! annual d3.unconf!

how I see the d3 community and the many learning curves one encounters on their journey

我對於D3社群和 D3學習過程中困難的理解

非常感謝 Erik Hazzard 幫助我編輯和潤色這篇文章. 感謝 Kai Chang 對於文章提出的建議, 更加感謝你對於 d3 社群的幫助. 感謝slack channel #teaching-d3 in the d3js Slack, 特別是 Sebastian 和 John 的反饋. 當然了, 最最感謝D3的作者 Mike Bostock 創造了一個能讓我們所有人玩耍的樂園 !