D3 vs G2 vs Echarts

初次接触web图表开发的工程师，面对众多的可视化工具库难免会有疑惑，比如说：

这库的产品定位？

哪个更好学？

哪个更强大？

让我们带着问题，从这三个库的命名出发，比较一下：

 

Echarts

简述：

该库为百度团队开发，因其开源免费又容易手上，所以很快流行起来。

正如其名 Echarts，亦如其它的xxCharts类库一样，该库中封装了绝大多数常规chart，用户通过配置 options 参数，就可很容易绘制指定图表。

优势：

容易上手：其语法类似 css 的参数配置型语法，学习门槛较低。

图表种类较丰富：因其发布较早且有百度团队维护，其提供的图表类型已能满足绝大部分常规性的业务需求。

劣势：

自由度差：参数配置型语法库的本质是调用现成的绘图函数，所以此类库的通病就是定制化能力差，想做出开发者未封装的图表非常难。

代码复用率低：因为此类库封装程度已非常高，所以很难对其进一步抽象和封装。

产品受众：

无数据可视化知识的前端工程师

 

G2：The Grammar of Graphics

简述：

该库由蚂蚁金服 antV 团队开发，其设计理念更有学术性，走出了一条与echarts不同的产品线路。

正如其名TheGrammar ofGraphics -可视化图形语法，该库有着被称为可视化圣经的《The Grammar of Graphics》作理论支撑，将可视化理论与web技术做了非常好的结合。

优势：

自由度较高：由可视化理论做基础，没有类似Echart的chart概念，可用“可视化语法”绘制想要的图表，非常灵活。

例如一根堆积柱形图的坐标系由笛卡尔坐标系改为极坐标系，堆积柱形图就变为了圆环图。

代码复用率较高：因其有一套完善的可视化语法，所以团队或公司可根据自己的UI需求，用g2做底层库，封装自己的charts库。

劣势：

学习成本稍高：g2 有理论的加持既是优势也是劣势；优势是更高效了，却也提高了可视化小白的使用门槛。

比如理解 g2 的绘图原理至少要知道数据可视化的五种“视觉通道”：数据可以映射到 position, size, color, shape, opacity 五个维度等等。

产品受众：

数据可视化工程师

希望向数据可视化领域发展的前端工程师

 

D3：Data Driven Documents

简述：

该库几乎凭 Mike Bostock 一人之力完成，且在学术界、专业团队中享有极大声誉。(想自学 D3 的同学请戳 《如何自学 D3》)

该库更接近底层，与g2、echarts不同，d3 能直接操作 svg，所以拥有极大的自由度，几乎可以实现任何2d的设计需求。

正如其名 DataDrivenDocuments，其本质是将数据与DOM绑定，并将数据映射至DOM属性上(这时视觉通道、比例尺转换等理论就可发挥作用喽～)。

同时，如下图，d3 长于可视化，而不止于可视化，还提供了数据处理、数据分析、DOM操作等诸多功能。 

图片来自网络

优势：

掌握 d3 后，限制作品水平的只会是想象力而不再是技术。

劣势：

学习门槛较高，对用户的web技术、可视化理论、数学逻辑都一定要求。

产品受众：

希望向中高水平进阶的可视化工程师

希望向中高水平进阶的前端工程师

题外话：

任何一款工具型产品，在产品设计时都遇到“自由度”和“简便性”两者间的权衡与取舍，而往往这两者很难兼得，我将这种情况称之为“跷跷板难题”。 

 

~

这也是为什么 echarts 使用简单而自由度差， d3自由度好而学习门槛高的原因了。

所以，回到 “哪个更强大” 的问题，这个问题，从不同角度看，会有不同答案。

在我看来，这三款可视化库各有优劣，没有哪款更强大，只有哪款更适合。

就像美图秀秀与PhotoShop，分别满足了不同人群，不同场景的需求。

以上

作者：子龙0322
链接：https://www.jianshu.com/p/7792544e680c
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。