d3與echarts的區別

1. 目前各大公司的大數據平臺多使用d3仍是echarts？何時適合用echarts，何時適合用d3?

在我看幾種數據可視化平臺多使用折線圖，面積圖和柱狀圖，條圖居多，對於echarts和d3都有使用。 對於使用d3仍是echarts還得從用戶需求，計算數據的量的大小來進行分析：

(1) 對於客戶需求要求的圖表擁有大量的用戶交互場景，用d3比較方便，由於d3中svg畫圖支持事件處理器，他是基於dom進行操做的。想要實現某個操做，直接調用相關的方法實現效果就行，他那個裏面存在鏈式語法，這個和jQuery的鏈式調用差很少，簡單易讀。

(2) 對於大量的數據展現而且對於用戶交互場景沒什麼要求，就只是展現數據，那我建議使用echarts，若是使用d3的話展現的每個數據都是一個標籤，那麼當數據發生改變的時候這時候圖表會從新渲染，會不停的操做dom，操做dom是很耗費性能的。

(3) 從兼容性方面考慮：echarts兼容到IE6及以上的全部主流瀏覽器，而d3兼容IE9及以上以及全部的主流瀏覽器，若是項目考慮兼容IE6，建議使用echarts。

2. D3和echarts的區別？

D3：

     太底層，學習成本大

兼容到IE9以上以及全部的主流瀏覽器

D3經過svg來繪製圖形

能夠自定義事件

Svg：

不依賴分辨率

基於xml繪製圖形，能夠操做dom

支持事件處理器

複雜度高，會減慢頁面的渲染速度

Echarts：

        封裝好的方法直接調用

兼容到ie6以及以上的全部主流瀏覽器

echarts經過canvas來繪製圖形

封裝好的，直接用，不能修改

Canvas：

依賴分辨率

基於js繪製圖形

不支持事件處理器

能以png或者jpg的格式保存圖片

3. 通常的交互都用在哪些方面上？

通常的數據交互，後臺返回數據，前端將數據經過圖表的形式展現給用戶。對於這種只是展現數據的話我比較經常使用的是echarts

而像一些鼠標、鍵盤、觸屏事件操做的話，是用d3實現的。由於svg支持事件處理器

                          當某個事件被監聽到時，d3會把當前的事件存到d3.event對象，裏面保存了當前事件的各類參數。

 

 

4. 不一樣圖表之間的對比：

 

柱狀圖（經常使用）

二維數據集，有一維須要比較，適合中小規模數據集，不超過12條數據

對比分類數據的數值大小

柱圖用高度反映數據差別，用來展現有多少項目（頻率）會落入一個具備必定特徵的數據段中，好比分析公司人員構成是否存在老齡化現象，能夠經過柱圖看到25歲如下的員工有多少，25歲到35歲之間員工有多少等這種年齡的分佈狀況。同時，柱圖還能夠用來表示含有較少數據值的趨勢變化關係。

條形圖主要是用於觀測進程,分類比較，柱形圖按照必定的區間將數據進行分組。其操做方法基本類似

 

條圖

 

 

條圖表達比較關係，按照強調的方式能夠排列任何順序，如在零售行業中統計暢銷品的銷售狀況就是很好的應用。它是最通用的一種圖表

折線圖（經常使用）

二維數據集，適合大量的數據展現，不注重數據的具體大小，注重在某一個時間段的數據的變化趨勢

觀察數據的變化趨勢

關心數據如何隨着時間變化而變化，每週、每個月、每一年的變化趨勢是增加、減小、上下波動或基本不變，這時候使用線圖更好地表現指標隨時間呈現的趨勢

 

面積圖（經常使用）

二維數據集

在折線圖的基礎上，進行運用

 

與折線圖較爲相似，面積圖強調變量隨時間而變化的程度，也可用於引發人們對總值趨勢的注意。用填充了顏色或圖案的面積來顯示數據，面積片數不宜超過5片

 

餅圖（經常使用）

 

對比分類數據的佔比狀況

構成比例關係時，最好使用餅圖

若是你想表達的信息包括：「份額」、「百分比」以及「預計將達到百分之多少」，這時候能夠用到餅圖。爲了使餅圖儘可能發揮做用，在使用中不宜多於6種成分。

 

 

 

 

氣泡圖（少用）

 

 

三維數據集

 

經過每一個點的面積大小，以及位置座標來展現信息

好比展現某一個具體的地點風的強度，有三個維度：精度，維度和風的強度，風的強度用圓的面積大小表示，圓越大，表明風的強度越大，可是人通常不善於判斷面積，那麼這個就適用於那些對於其中有一維辨識度沒有那麼高的三維數據的展現，可是具體的用的地方比較少，平時不多用

 

雷達圖（平時用的很少）

多維數據集，四維以上，可是數據點有限（<=6），因此他的適用場景也有限，平時用的也少

 

雷達圖能夠用來表現一個週期數值的變化，也能夠用來表現特定對象主要參數的相對關係。

雷達圖多用於在財務分析中，用來分析企業負債能力、運營能力、盈利和發展能力等指標。

 

 

 

在使用方面：

Echarts裏面的方法封裝比較好，用的時候直接調用就能實現效果，

對於echarts的使用比較簡單，引入echarts.js，而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法設置圖表實例的配置項以及數據，萬能接口，全部參數和數據的修改均可以經過setOption完成，ECharts 會合並新的參數和數據，而後刷新圖表。若是開啓動畫的話，ECharts 找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化

 

而d3須要本身添加畫布，繪製圖形，繪製的每個圖形都爲一個對象，能夠添加相應的事件操做，操做dom