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開發的專案看起來會比較高大上一點~