原文: 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 地址: https://github.com/ssthouse/d3-blog
學習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 和 數據可視化的概念,標準都是需要學習的. 很有可能你已經知道上面這些中的一部分, 這篇文章旨在爲你繼續學習提供一個好的起點.
在我們進入數據可視化和代碼技巧的學習之前, 先讓我們看看一些能讓我們激發學習興趣的東西. 這裏有很多讓人驚歎的例子, 不妨點進去看一看, 並給自己設定一個學習目標: 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
圖表僅僅是內部有一些形狀的矩形. 而D3提供的是一種讓你通過操作圖標或者你自己定義的圖形來表達你想要展示數據的方式. 它讓你可以輕易地爲你的圖形添加可視化交互, 定義你的圖形有怎樣的行爲. 你在D3中學到的將是一種可視化的表達方式, 這是你在其他library中所得不到的.
如果你想要了解人們所用的不同種類的標記和圖形符號所遵循的準則, 你可以參考這本書: Grammar of Graphics.
不過不用擔心, 僅僅是用圓圈和矩形你就已經可以寫出無數具有創造力的作品了. 從簡單的事情做起, 先在屏幕上展示一些東西, 再慢慢優化它.
在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.
其實你甚至可以不用使用 SVG來進行圖形展示, 有時候直接用 div 就足以讓你做出想要的效果. 當然這要求你對 CSS 有較好的掌握: CSS positioning . 爲了達到你想要的效果, 你甚至可以 混用 HTML, SVG , Canvas!
開始學習 d3.js
你可能見過D3的API文檔, 展示着成堆的Function: d3’s API, 幸運的是, 現在D3已經拆分爲了一個個的模塊, 所以我們從中挑選一些特別常用的來進行介紹.
d3-scale
scales是D3中非常基礎的一個工具. 你可以從這裏對它有一個大概的瞭解: Introducing d3-scale 來自D3作者 Mike Bostock. 無論你做什麼樣的數據可視化, 你都非常有可能用到一種或多種scale.
d3-shape
SVG 的path非常冗雜 (see this thorough overview), 所以 d3-shape 提供了一些讓我們非常方便創建並操作SVG path的方法. 你可以看看 Mike 的 Introducing d3-shape 來了解它的作用並着手開始使用它. d3-shape 還可以幫助你在Canvas中繪製各種各樣的圖形, 你僅僅添加一行代碼就能將SVG的path添加到Canvas中!
d3-selection
the D3中最難以理解的部分可能就是它的selection了, 同樣的, 看看D3作者的文章能讓你對D3的selection模型有一個更好的理解: General Update Pattern. 我花了好幾個月用腦袋錘桌子才最終理解了selection模型, 但是不要爲此感到害怕! 你並不需要完完全全的掌握selection的所有api才能完成一份D3的作品. 當你做好了學習的準備, 你可以從這篇文章開始: d3-selections README. 還有, 請一定看看這篇文章, 非常有助於理解selection模型 Thinking in Joins.
d3-collection
操作數據是數據可視化中非常重要的步驟. 有時候這甚至是最困難的一部 (如果你的數據集不是很完美, 或者你對它沒有很好的理解). 雖然有很多可以幫助進行數據處理的工具, 這裏我還是推薦看看d3 collection d3-collection,特別是這個模塊: nest function.
d3-hierarchy
接着上面對於 數據操作 的討論. 在很多數據可視化中, 按照數據的結構對其進行相應的展示是非常關鍵的一點. 你可以在這裏找到很多工具Function, 它們能幫你很方便的進行這樣的數據處理: d3-hierarchy 繪製樹狀結構的數據.
d3-zoom
縮放是一種非常常見的數據可視化交互, D3的作者 Mike 給出了 一系列的例子 展示如何將縮放功能引入你的數據可視化作品中 d3-zoom. 你也可以看看和 縮放 非常類似的一種操作 拖拽 d3-drag
d3-force
D3中非常讓人們感到驚豔的功能之一是 d3 force layout. 它非常容易上手使用, 但是很難真正掌握. 詳細信息請參考: d3-force.
搜索!
最後一個tip: 你可以在這個網址對任何API Function搜索使用案例: BlockBuilder’s search.你甚至可以將你的搜索範圍限定版本的d3上!
D3社區
和志同道合的人們聯繫起來! 你可以加入我們的slack channel: d3.js slack channel. 或者找到和你最近的D3線下活動: https://www.meetup.com/topics/d3-js/). 如果你對D3非常狂熱的話, 來參加SF每年秋天的聚會吧! annual d3.unconf!
非常感謝 Erik Hazzard 幫助我編輯和潤色這篇文章. 感謝 Kai Chang 對於文章提出的建議, 更加感謝你對於 d3 社區的幫助. 感謝slack channel #teaching-d3 in the d3js Slack, 特別是 Sebastian 和 John 的反饋. 當然了, 最最感謝D3的作者 Mike Bostock 創造了一個能讓我們所有人玩耍的樂園 !
如果覺得不錯的話, 不妨關注一下 : )
想直接聯繫我 ?
微信:
