D3 vs G2 vs Echarts

初次接觸 web 圖表開發的工程師,面對眾多的可視化工具庫難免會有疑惑,比如說:

這庫的產品定位?

哪個更好學?

哪個更強大?

讓我們帶著問題,從這三個庫的命名出發,比較一下:


Echarts

簡述

該庫為百度團隊開發,因其開源免費又容易手上,所以很快流行起來。

正如其名 Echarts,亦如其它的 xxCharts 類庫一樣,該庫中封裝了絕大多數常規 chart,用戶通過配置 options 參數,就可很容易繪制指定圖表。

優勢

容易上手:其語法類似 css 的參數配置型語法,學習門檻較低。

圖表種類較豐富:因其發布較早且有百度團隊維護,其提供的圖表類型已能滿足絕大部分常規性的業務需求。

劣勢

自由度差:參數配置型語法庫的本質是調用現成的繪圖函數,所以此類庫的通病就是定制化能力差,想做出開發者未封裝的圖表非常難。

代碼復用率低:因為此類庫封裝程度已非常高,所以很難對其進一步抽象和封裝。

產品受眾

無數據可視化知識的前端工程師


G2The Grammar of Graphics

簡述

該庫由螞蟻金服 antV 團隊開發,其設計理念更有學術性,走出了一條與 echarts 不同的產品線路。

正如其名 The?Grammar of?Graphics -可視化圖形語法,該庫有著被稱為可視化圣經的《The Grammar of Graphics》作理論支撐,將可視化理論與web技術做了非常好的結合。

優勢

自由度較高:由可視化理論做基礎,沒有類似 Echart 的 chart 概念,可用“可視化語法”繪制想要的圖表,非常靈活。

例如一根堆積柱形圖的坐標系由笛卡爾坐標系改為極坐標系,堆積柱形圖就變為了圓環圖。

代碼復用率較高:因其有一套完善的可視化語法,所以團隊或公司可根據自己的 UI 需求,用 g2 做底層庫,封裝自己的 charts 庫。

劣勢

學習成本稍高:g2 有理論的加持既是優勢也是劣勢;優勢是更高效了,卻也提高了可視化小白的使用門檻。

比如理解 g2 的繪圖原理至少要知道數據可視化的五種“視覺通道”:數據可以映射到 position, size, color, shape, opacity 五個維度等等。

產品受眾

數據可視化工程師

希望向數據可視化領域發展的前端工程師


D3Data Driven Documents

簡述

該庫幾乎憑 Mike Bostock?一人之力完成,且在學術界、專業團隊中享有極大聲譽。(想自學 D3 的同學請戳 《如何自學 D3》)

該庫更接近底層,與 g2、echarts 不同,d3 能直接操作 svg,所以擁有極大的自由度,幾乎可以實現任何 2d 的設計需求。

正如其名 Data?Driven?Documents,其本質是將數據與 DOM 綁定,并將數據映射至 DOM 屬性上(這時視覺通道、比例尺轉換等理論就可發揮作用嘍~)。

同時,如下圖,d3 長于可視化,而不止于可視化,還提供了數據處理、數據分析、DOM 操作等諸多功能。?

圖片來自網絡

優勢

掌握 d3 后,限制作品水平的只會是想象力而不再是技術。

劣勢

學習門檻較高,對用戶的 web 技術、可視化理論、數學邏輯都一定要求。

產品受眾

希望向中高水平進階的可視化工程師

希望向中高水平進階的前端工程師

題外話:

任何一款工具型產品,在產品設計時都遇到“自由度”和“簡便性”兩者間的權衡與取舍,而往往這兩者很難兼得,我將這種情況稱之為“蹺蹺板難題”。?


~

這也是為什么 echarts 使用簡單而自由度差, d3 自由度好而學習門檻高的原因了。

所以,回到 “哪個更強大” 的問題,這個問題,從不同角度看,會有不同答案。

在我看來,這三款可視化庫各有優劣,沒有哪款更強大,只有哪款更適合。

就像美圖秀秀與 PhotoShop,分別滿足了不同人群,不同場景的需求。

以上

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容