d3與echarts的區別

2021-08-20 09:37:27 字數 1855 閱讀 2173

在我看幾種資料視覺化平台多使用折線圖,面積圖和柱狀圖,條圖居多,對於echarts和d3都有使用。 對於使用d3還是echarts還得從使用者需求,計算資料的量的大小來進行分析:

(1) 

對於客戶需求要求的圖表擁有大量的使用者互動場景,用

d3比較方便,因為d3中svg畫圖支援事件處理器,他是基於dom進行操作的。想要實現某個操作,直接呼叫相關的方法實現效果就行,他那個裡面存在鏈式語法,這個和jquery的鏈式呼叫差不多,簡單易讀。

(2) 

對於大量的資料展示並且對於使用者互動場景沒什麼要求,就只是展示資料,那我建議使用

echarts,如果使用d3的話展示的每乙個資料都是乙個標籤,那麼當資料發生改變的時候這時候圖表會重新渲染,會不停的操作dom,操作dom是很耗費效能的。

(3) 

從相容性方面考慮:echarts相容到ie6及以上的所有主流瀏覽器,而d3相容ie9及以上以及所有的主流瀏覽器,如果專案考慮相容ie6,建議使用echarts。

d3:svg:

echarts:

canvas:

一般的資料互動,後台返回資料,前端將資料通過圖表的形式展示給使用者。對於這種只是展示資料的話我比較常用的是echarts

而像一些滑鼠、鍵盤、觸屏事件操作的話,是用d3實現的。

因為svg支援事件處理器當某個事件被監聽到時,d3會把當前的事件存到d3.event物件,裡面儲存了當前事件的各種引數。

柱狀圖(常用)

二維資料集,有一維需要比較,適合中小規模資料集,不超過12條資料

對比分類資料的數值大小

柱圖用高度反映資料差異,用來展示有多少專案(頻率)會落入乙個具有一定特徵的資料段中,比如分析公司人員構成是否存在老齡化現象,可以通過柱圖看到25歲以下的員工有多少,25歲到35歲之間員工有多少等這種年齡的分布情況。同時,柱圖還可以用來表示含有較少資料值的趨勢變化關係。

條形圖主要是用於觀測程序,分模擬較,柱形圖按照一定的區間將資料進行分組。其操作方法基本相似

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

折線圖(常用)

二維資料集,適合大量的資料展示,不注重資料的具體大小,注重在某乙個時間段的資料的變化趨勢

觀察資料的變化趨勢

關心資料如何隨著時間變化而變化,每週、每月、每年的變化趨勢是增長、減少、上下波動或基本不變,這時候使用線圖更好地表現指標隨時間呈現的趨勢

面積圖(常用)

二維資料集

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

與折線圖較為類似,面積圖強調製數隨時間而變化的程度,也可用於引起人們對總值趨勢的注意。用填充了顏色或圖案的面積來顯示資料,面積片數不宜超過5片

餅圖(常用)

對比分類資料的佔比情況

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

如果你想表達的資訊包括:「份額」、「百分比」以及「預計將達到百分之多少」,這時候可以用到餅圖。為了使餅圖盡量發揮作用,在使用中不宜多於6種成分。

氣泡圖(少用)

三維資料集

通過每個點的面積大小,以及位置座標來展示資訊

比如展示某乙個具體的地點風的強度,有三個維度:精度,維度和風的強度,風的強度用圓的面積大小表示,圓越大,代表風的強度越大,但是人一般不善於判斷面積,那麼這個就適用於那些對於其中有一維辨識度沒有那麼高的三維資料的展示,但是具體的用的地方比較少,平時很少用

雷達圖(平時用的不多)

多維資料集,四維以上,但是資料點有限(<=6),所以他的適用場景也有限,平時用的也少

雷達圖可以用來表現乙個週期數值的變化,也可以用來表現特定物件主要引數的相對關係。

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

在使用方面:

資料視覺化工具d3與echarts的區別

區別 d3echarts 太底層,學習成本大 封裝好的方法直接呼叫 相容到ie9以上以及所有的主流瀏覽器 相容到ie6以及以上的所有主流瀏覽器 通過svg來繪製圖形 通過canvas來繪製圖形 可以自定義事件 封裝好的,直接用,不能修改 svgcanvas 不依賴解析度 依賴解析度 基於xml繪製圖...

D3的簡單語法

選擇 選擇單個元素用 select 選擇第乙個元素 選擇多個元素用 selectall 選擇 插入 刪除元素 insert 在選擇集前面插入元素 d3.select body insert p moon remove 刪除元素 d3.select moon remove 文字屬性樣式操作 資料連線 ...

D3的學習 01 選擇與繫結

1.select與selectall d3.select 是選擇所有指定元素的第乙個 d3.selectall 是選擇指定元素的全部 其他選擇方式 2.元素的繫結 datum 繫結乙個資料到選擇集上 data 繫結乙個陣列到選擇集上,陣列的各項值分別與選擇集的各元素繫結 e.g 2 var data...