D3.js 簡介

原文: 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 和資料可視化的概念,标準都是需要學習的. 很有可能你已經知道上面這些中的一部分, 這篇文章旨在為你繼續學習提供一個好的起點.

sets the bar high](

https://user-gold-cdn.xitu.io/2018/6/12/163f24615b562fcd?w=1838&h=812&f=png&s=42330

)

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

has made some beautiful

nutrition visualizations

](

https://user-gold-cdn.xitu.io/2018/6/12/163f2461562c382e?w=921&h=293&f=png&s=267173

)學習D3來寫圖表就像是學習法語來寫營養标簽. 公平的來說 ,

@syntagmatic

确實做出了非常不錯的

營養标簽

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

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

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

在Web展示上

是對web标準的圖形操作非常棒的展示](

https://user-gold-cdn.xitu.io/2018/6/12/163f2461640c2160?w=2216&h=1056&f=png&s=475378 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有一個更深的了解