D3.js在數據可視化中的應用以及注意事項

談起數據可視化項目，無法忽視圖表的重要性，人們通過各種類型的圖表來直觀地表達數據背後的意義和故事。

技術人員也在產品/項目開發中，通過各種圖表引擎（框架）來實現圖表的製作和渲染。目前常見的框架有：echarts、Hicharts、Charts.js以及圖表引擎的」開山鼻祖「——D3.js。

什麼是D3.js ？

D3.js顧名思義，由3個首字母為D的單詞（Data-Driven Documents，數據驅動的文檔）組成，是一個JavaScript庫，它可以通過數據來操作文檔。D3可以通過使用HTML、SVG和CSS把數據鮮活形象地展現出來。

為什麼使用D3.js ?

D3嚴格遵循Web標準，因而可以讓你的程序輕鬆兼容現代主流瀏覽器並避免對特定框架的依賴。它提供了強大的可視化組件，可以讓使用者以數據驅動的方式去操作DOM。D3 有極高的靈活性，它是一個比較基礎的可視化 js 庫，api 和 jQuery 很像，可以把數據和 HTML 結構或者 SVG 文檔對應起來。D3 有豐富的數學函數來處理數據轉換和物理計算，它擅長於操作 SVG 中的路徑 (path) 和幾何圖形 (circle, ellipse, rect...)。

壹看板為什麼要使用D3.js進行可視化開發?

Echarts是一個免費的，功能強大的製圖和可視化庫。提供一個簡單的方法來實現添加直觀的，互動的的圖表。它是用純JavaScript和基於zrender（H5 canvas類庫），一個全新的輕巧canvas庫。 Echarts上手容易，中文API相當完善，調用方式簡單，而且圖表樣式美觀，調用百度地圖也是非常快捷。

但是，echarts更像是快餐，它能夠滿足我們基本的需求，比如餓了，我們可以吃飽，但對於口味刁鑽的人，echarts就很難滿足了。簡單來說，echarts在高度定製化方面並不靈活。你不可能進了肯德基，去點一道糖醋鯉魚，對吧。而d3呢，就像你自家的廚房，準備好食材，你可以隨心所欲的去做你想吃的菜。

對於咱們的壹看板來說，也有諸如多維度多度量的智通表達、篩選/格式化的人性化交互、顏色/刻度/網路的表現、同數據源之間的圖表聯動等個性化的問題，是echarts所不能滿足的，而這也是促使我們向d3轉變的根本原因。

理解D3.js的模式

操作對象：數據集合 + 圖片集合，

操作名稱： 進入，更新，退出。

Enter(進入)：選擇出來沒有綁定圖片的數據

A:代表數據集合，就是需要可視化的數據；B:代表圖形元素的集合，就是展示出的圖形；

如上圖所示，集合A中的陰影區部分表示了未被可視化的數據，enter操作的意義在於通過enter()函數返回一個集合，這個集合裡面包含的就是沒有被可是可視化的數據；這也就是我們數據化的第一部分操作，找到那些沒有被可視化的數據；

Updata(更新)：選擇已經綁定圖片和數據的集合

如上圖所示，陰影區域表示圖像和數據集合的交集，也就是當前數據所對應的圖形，通過data函數，可以選擇出交集集合，然後對選擇出的集合進行操作，對元素進行更新；

Exit(退出)：選擇沒有綁定數據的圖片

圖中的陰影表示沒有關聯任何數據的圖形，為什麼會有沒有數據的圖形，一般而言是從

數據中刪除了數據產生的。通過exit函數可以選擇出沒有關聯任何數據的圖形，可以調

用相關函數更新或是刪除。

D3作品賞析

D3.js除了滿足常見的基本圖表類型的製作，更滿足複雜的、高度定製化的使用場景，可以說只要有合適結構數據就沒有無法通過D3.js表現不出來的圖表，高度的可定製性也許就是D3.js區別於其它框架的最根本區別吧。

接下來，附上一些通過D3.js實現的作品，供大家鑒賞。

多維度單度量柱狀圖

單維度多度量柱狀圖

多維度多度量柱狀圖

壹看板 - 人人可用的數據分析平台，簡單易用，智能分析!