d3可視化實戰00：d3的使用心得和學習資料彙總

最近以來，我使用d3進行個人可視化工具的開發已經3個月了，同時也兼用其餘一些圖表類庫，自我感受稍微有點心得。以前我也寫過相關文章，我涉及的數據可視化的實現技術和工具，可是那篇文章對於項目開發而言太淺了。因而想寫關於d3進行項目實戰的系列文章，就像我以前的angularjs實戰系列文章同樣把整個開發過程當中遇到的各類問題及解決辦法梳理成章，覺得留存。做爲開篇，我仍是想先把這段時間來我一直參考的資料作一個整理，並談一些宏觀的體會。

一.前方有坑，注意！

—————————————————————————————————————————————————————————————————

1. 首先請注意d3的全稱是叫作data driven documents，直譯爲數據驅動文檔，是數據驅動的SVG圖形編輯與交互制做的基礎類庫，而不是什麼XX圖表庫。因此只是尋找簡易圖表類庫直接拿來進行快速項目開發的童鞋，能夠直接繞道了，d3不是你的菜，你應該去使用xcharts(基於d3作的圖表類庫)、echarts(百度的開源類庫)、RGraph、highcharts(收費圖表庫)等等，這些才符合你高效製做圖表的須要。而d3就留給那些須要高度定製化的交互圖形的製做者用吧。
2. 其次，SVG對IE低版本不兼容。還想兼容IE6，7，8的童鞋也能夠繞道了。有研究如何兼容的功夫不如多花在跟客戶、老闆談判上，是時候去鍛鍊一下談判能力了。
3. 第三，d3的學習曲線比較陡峭，要了解的東西比較多。首先是SVG的基本知識，而後至少會用一種SVG編輯器，好比Adobe Illustrator等等。以後，須要對javascript有比較深入的瞭解，對於什麼是數據驅動有本身的體會更好。因此，對於連PS不肯意學的純程序員和填鴨速成的前端工程師而言，若是沒有巨大利益驅動，那麼仍是不作爲好。

二.爲何使用d3?

—————————————————————————————————————————————————————————————————

在數據可視化蓬勃發展的新時代，人們已不能知足於靜態圖片報表或者office excel生成的靜態報表，而是須要包含各類交互功能的實時數據展示工具。這就決定了，在web開發領域，那種IE6，7，8時代殘留的hacker方法，諸如圖片替代和低效的VML方案，都已通過時。必需要使用諸如svg, html5 canvas, webGL這樣的技術才能實時數據展示的要求。因爲存在着實時交互的數據可視化功能的需求，故而使用這些新技術也是推動使用現代瀏覽器，摒棄過期的IE瀏覽器的好機會。

在這些新技術中，webGL還不是很成熟。html5 canvas和SVG則各有千秋，前者兼容性更強，後者開發成本更低。SVG自己是通用圖形數據格式，什麼放大縮小位移填充動畫之類，全SVG屬性就能搞定，而且SVG擁有不少設計工具，令這一通用格式在設計上也更爲容易。CSS3標準的制定參考了不少SVG的內容，以致於在現代瀏覽器中，CSS3與SVG完美互補。以上特性決定了SVG很適合進行定製化的可視化工具開發。

在SVG相關的javascript類庫中，d3是其翹楚。先不說它的demo如何如何絢麗，github上fork的人如何如何多，做爲美國華盛頓大學開發的可視化工具項目，絕對有能力開發諸多應用。d3主推的數據驅動機制，其實與java社區中的對軟件開發分層理解一致，對於前端程序員，若是使用過angularjs、emberjs 之類的框架，瞭解數據-視圖雙向綁定的機制，那麼理解起d3的數據驅動也很容易。除此以外，D3幫助你屏蔽了瀏覽器差別，作出來圖案的效果十分絢麗，但是代碼卻很簡潔，而且在代碼風格上近似於jquery的鏈式風格，很容易理解。若是確認本身的目標是要製做高度定製化的可視化工具，那麼d3絕對是個好工具。

d3的成功案例太多，這裏有兩千多個先拿去看吧。

三.d3溯源

—————————————————————————————————————————————————————————————————

多是喜歡看歷史書的緣故，對於計算機各類程序的歷史，我都很感興趣並着意挖掘，由於一切技術都不是橫空出世的，都是有着前期的各類積累，應運時代大潮而生。最先的瀏覽器netscape誕生於1994年，那時候的網頁上只有一種交互操做——點擊超連接而後跳轉過去。然而隨着人們的需求愈來愈高，網頁與愈來愈多的技術相組合，如javascript, css, flash, svg等等，它們帶來了愈來愈豐富的用戶交互。早在上世紀末，人們便但願在網頁上圖形化地表現數據。D3js以前已經有一系列着眼於圖形渲染的web技術，例如依託java開發的processing(2011)， Prefuse(2005)，依託flash開發的flare（2007），以及依託javascript開發的Protovis（2009）。2011年，斯坦福大學的Jeff Heer教授，博士生Mike Bostock，碩士生Vadim Ogievetsky在他們開發的SVG圖形渲染類庫Protovis的基礎上，開發了開源新項目D3js,到如今已是3.1.4版本了。

四.d3的定位

—————————————————————————————————————————————————————————————————

Processing.js Raphaël

d3.js

Google Charts Highcharts

這裏有必要補充一下d3這個類庫的定位。在圖形處理方面的javascript類庫中，d3既不不像processing.js和raphael.js那樣特別關注底層圖形渲染，也不像google charts和highcharts那樣主要是提供定製化的圖表接口，而是處於中間層的位置：將dom操做方法封裝，結合一套數據集合操做集，如此提供基於數據驅動實現圖表的方法。查看到d3 API，咱們能夠看到其中提供的方法大部分是數據集合操做和html or svg dom操做，還有一批專門用於各類圖形顯示的佈局方法。

jquery prototype

backbone

angular.js ember.js

若是非要類比一下，我以爲d3.js有點相似於backbone.js在各類前端類庫中的位置。backbone既不像jquery或者prototype那樣關注於底層dom操做方法的實現，也不像angular和ember那樣是一個MVC重型框架，而是處於中間的位置：只是將一套基於MVC數據封裝結構結合着基於underscore的數據集操做方法提供給用戶，以實現輕量級的、靈活性最大的前端MVC編程。

若是把最終追求替換成實現交互圖表，最低追求替換成底層圖形渲染，那麼第二個表就能夠徹底被第一個表替換。因此我認爲能夠稱d3爲圖形操做領域的輕量級框架。d3和backbone都是各自領域的輕量級框架，好處是靈活方便，同時還有不少已有的數據操做方法可用，但爲此必然會付出更多的定製成本。好在d3的案例和學習資料不少，照瓢畫葫蘆並非很難。

五.學習資料彙總：

—————————————————————————————————————————————————————————————————

最系統全面的培訓教程，包含收費培訓項目：

https://www.dashingd3js.com/d3-training

d3 wiki，包含介紹和API，必須參考的內容：（有部分漢化）

https://github.com/mbostock/d3/wiki

若是以爲內容太多，那麼光看下面這本d3 cockbook，研究一下里面的例子，也能夠速成，方便非深度玩家使用。

http://nickqizhu.github.io/d3-cookbook/

最後是一些書籍，都有在線版本能夠直接查看。其中第一本有中文版，講的很淺顯，我有一本。

Safari Books Online has the content you need

	Interactive Data Visualization for the Web shows you how to create and publish your own interactive data visualization projects on the Web – even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.
	Developing a D3.js Edge D3 is a powerful framework for producing interactive data visualizations. Many examples created in the real world with D3, however, can best be described as 「spaghetti code.」 So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
	Data Visualization with d3.js walks you through 20 examples. You can finally stop struggling to piece together examples you’ve found online. With this book, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch. It begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.
	Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.