D3.js與echart.js的應用場景

什麼是D3？

D3.js的全稱是Data-Driven Documents，其實就是一個數據驅動的文檔的js庫，簡而言之就是一個數據可視化的庫。那什麼是數據可視化呢？舉個例子：

給出一組數據 [10，80，40,100,30,20,50]

若是咱們想要看出這組數據的大小關係，單看數據顯然不夠直觀。那麼咱們能夠將它轉換爲一種簡單易懂的圖表的形式（以下圖）這樣咱們就能夠更加直觀的獲取數據所傳遞給咱們的信息。這個過程就叫作數據可視化。

在咱們平時的項目開發中常常會遇到這種狀況：後端返回給咱們一組數據，前端人員須要把數據以一種很舒服、很直觀的方式給別人展示出來，最好的選擇就是經過圖表，圖表能夠很直觀的把龐大的數據以一種合適的方式展示給咱們。可是若是經過js,css去本身寫出這些圖表顯然是很麻煩的。因此就有D3.js。

使用D3能夠繪製圖表能夠大大的提高咱們的開發速度。並且使用起來比較靈活，換言之（想畫什麼就畫什麼）。D3是一種偏函數式編程的方式，這也是他比較複雜的地方，正由於他比較靈活，因此它所涉及的東西比較底層，學習成本就比較大。下面是一些D3.js繪製出的圖例：

這些只是官網中的一小部分，感興趣的同窗能夠去官網看看。能夠看出，使用D3繪製的圖表看起來都很靈活。咱們在項目中使用的時候只須要將數據和相應的圖表結合起來，就能夠將圖表渲染在頁面上了。

什麼是echarts?

顧名思義echarts其實也是一個數據可視化的工具，它和D3的做用很相似。echarts是封裝好的，因此咱們使用起來很方便，只用填寫他的配置項就可使用，但也偏偏由於它被封裝好的緣故，因此靈活性較差，咱們只能修改它所存在的配置項，若是想要本身添加或修改配置項中不存在的東西是不能夠的。下面試echarts的一些圖表示例：

echarts和D3的區別

既然echarts和D3的做用類似，那他們有什麼不一樣之處呢？我以爲他們之間最大的不一樣之處就在於echarts它是使用canvas來繪製圖形的，而D3是經過Svg來繪製圖形的。這二者的不一樣之處在於，svg能夠操做dom支持事件處理器，想要實現某個操做，直接調用相關的方法實現效果就行，他那個裏面存在鏈式語法，這個和jQuery的鏈式調用差很少，簡單易讀。canvas不支持事件處理器因此只能展現數據，而不能修改。

• D3使用svg繪製圖形，echarts使用canvas繪製圖形
• D3兼容IE9及以上主流瀏覽器，echarts兼容IE6及以上主流瀏覽器
• D3使用靈活，學習成本大，echarts封裝好的，使用簡單，不夠靈活

D3與echart的適用場景

由於D3支持事件處理器能夠操做dom，因此若是在項目開發中若是有較多用戶交互的場景，可使用D3.若是項目中通常沒有用戶交互的場景，咱們只須要將圖表展現給用戶看，而不須要更改，可使用echarts。由於D3它展現的每個數據都是一個標籤，因此當數據發生改變的時候圖表會從新渲染，會不停的操做dom，這對性能的消耗是很是大的。

這裏只是簡單的介紹一下echarts和D3，感興趣的同窗能夠去官網查看具體使用方法，官網上都介紹的很是詳細，有時間也能夠本身實踐一下，也會有很大的收穫，並且用echarts和D3開發的項目看起來會比較高大上一點~