[譯]D3.js 漫遊指南

時間 2019-11-12

原文原文鏈接

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

譯文源代碼地址: https://github.com/ssthouse/d3-blog/blob/master/d3-guide/d3_roadmap_cn.mdhtml

若是這篇文章對你有幫助的話, 不妨點個贊 :tada:html5

github 地址: https://github.com/ssthouse/d3-bloggit

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

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

這篇文章目的是讓你在思想上作好學習D3的準備, 而且提供一些接下來學習的方向. 除了對於D3自己API的學習, 關於web標準的HTML, SVG, CSS, Javascript 和數據可視化的概念,標準都是須要學習的. 頗有可能你已經知道上面這些中的一部分, 這篇文章旨在爲你繼續學習提供一個好的起點.chrome

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

在咱們進入數據可視化和代碼技巧的學習以前, 先讓咱們看看一些能讓咱們激發學習興趣的東西. 這裏有不少讓人驚歎的例子, 不妨點進去看一看, 並給本身設定一個學習目標: New York Times article, r2d3, distill.pub, datasketch|es, polygraph, ncase.api

不要只是看看就好, 你能夠給本身設定一個大一點的目標. 我從這篇文章中學習到, 最好的學習方式就是給本身設定一個想要完成的任務, 而且絞盡腦汁的去完成它: 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來寫圖表就像是學習法語來寫養分標籤. 公平的來講 , @syntagmatic 確實作出了很是不錯的養分標籤

圖表僅僅是內部有一些形狀的矩形. 而D3提供的是一種讓你經過操做圖標或者你本身定義的圖形來表達你想要展現數據的方式. 它讓你能夠輕易地爲你的圖形添加可視化交互, 定義你的圖形有怎樣的行爲. 你在D3中學到的將是一種可視化的表達方式, 這是你在其餘library中所得不到的.

若是你想要了解人們所用的不一樣種類的標記和圖形符號所遵循的準則, 你能夠參考這本書: Grammar of Graphics.

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

在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 讓你能夠快速上手玩轉web圖形標準!

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

開始學習 d3.js

d3js.org

你可能見過D3的API文檔, 展現着成堆的Function: d3’s API, 幸運的是, 如今D3已經拆分爲了一個個的模塊, 因此咱們從中挑選一些特別經常使用的來進行介紹.

d3-scale

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

scales是D3中很是基礎的一個工具. 你能夠從這裏對它有一個大概的瞭解: Introducing d3-scale 來自D3做者 Mike Bostock. 不管你作什麼樣的數據可視化, 你都很是有可能用到一種或多種scale.

d3-shape

* 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 讓你能夠很是輕鬆的將類似的數據歸結在一塊兒

操做數據是數據可視化中很是重要的步驟. 有時候這甚至是最困難的一部 (若是你的數據集不是很完美, 或者你對它沒有很好的理解). 雖然有不少能夠幫助進行數據處理的工具, 這裏我仍是推薦看看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!

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

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