数据产品的前端技术选型的思考

数据产品首先也是一个web工程，这里不谈是react还是vue，个人认为凭喜好即可。本文想说说关于高交互，多维数据分析，多图表展示的产品如何选择 工具 库，以及有哪些库可以用。

图表库选择

主流的web图表库有：echarts；highcharts；D3js；antv（G2，G6，F2）基于D3封装的react图表库rechart；还有基于G2封装的react图表库viser；Bizcharts，等等。还有关系图展示使用的Cytoscapejs；时序图常用工具库visjs等等 那么如何选择呢？

这是一个哲学命题，没有什么是最好的，你开心就好。毕竟被说定制性太强的echarts也是可以通过底层zrender绘制最自由的shader。所以，接下来我们是站在工程的角度来分析。

1根据项目涉及的图表复杂度来选择。

简单的传统图表，最佳搭档 echarts，highcharts（商业收费），属于枚举型图表。通过配置项来绘图，所绘制的图表符合其枚举出来的图表类型，或根据既定的规则叠加图表。用于使用传统图表，对图表设计细节定制要求不高的产品。简而言之，就是设计师不会跟你pk视觉还原度的图表。要求：设计师设计要从demo库中枚举展示图表。如果超岗，不好意思作为前端的你可能就比较痛苦。

假如你的设计师比较个性，这时候可以考虑使用G2绘制。所谓的个性化设计，其实要求是很高的。g2的官网是这么介绍自己的：

G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

所以选择用g2绘制个性化图表设计是要遵循这套图形语法的。下图来自g2官网（ www.yuque.com/antv/g2-doc…

如果想要超自由的表达，大量个性化创新型设计，甚至是出现信息可视化（如果你的页面有很多坐标系，且比例尺复杂，或者根本没有正经坐标系和比例尺）。这时候就该使用神器d3js了。毫不犹豫，d3可以绘制任何合理设计的图表。这里又提到一个词“合理设计”，什么是合理设计，其实就是能够找到数据与图形映射的关系。也就是设计的图形位置颜色大小等等都能有明确的规则计算出来。从d3js的slogan我们就可以看出，d3js给自身的定义就不仅仅限制与图表，它不说自己是xxxchart。而是Data-Driven Documents。如字面意思，数据驱动dom。d3js提供的是数据与dom（图形）的映射处理。所以我们可以分成，数据源--- 数据映射层（d3）--- 绘图层（svg / div css / canvas）。d3也提供一个简易的dom操作工具d3-selection.

2 根据数据形态选择工具

其实决定产品形态的最大因素是数据类型。 数据类型大致有: 分类数据；量化数据；时序数据；空间数据；关系型数据； 分类数据；量化数据；使用到到多数是传统统计报表。

时序数据：是时间为主要线索的数据，反应时间变化。这里推荐一个visjs： visjs.org/timeline_ex… 可以比较有效的帮助展示时间。同时d3-time与插值器Time Intervals 可以很好的提供便捷的时间计算。moment也是不错的工具。

空间数据，最常见的是地理信息数据，由于国家统计局要求的中国地图出处必须合法，并通过审核。所以，使用d3绘制需要geojson就可能不符合国情且仅适合矢量图绘制。所以，这里推荐使用高德和百度地图，高德封装了一个可视化工具loca，百度地图可以配合echarts使用。

图：高德数据可视化效果图

关系型数据，就是大家看到的点线边数据。包括树形结构数据。这类数据比较特殊性。可选框架包括：d3-force，g6 ，visjs，Cytoscapejs，cola.js， gephi 等等。这些都是基于力导图模拟电荷运动计算布局，所以使用者需要对力导图碰撞算法，图算法，三角函数比较熟悉，最好熟悉一下四叉树八叉树算法（用于优化检索效率）。

图： Cytoscapejs -demo

3. 图表工具库组合使用

正如上文提到的一个概念：数据源--- 数据映射层 --- 绘图层（svg / div css / canvas）。我们绘图的过程可以分为这三层。同时，数据源还能在分业务模型和控制层，绘图层又可分为，图形模型与表现层。但使用不同但工具，这些分层就会被不同层度的组合起来。例如，使用echarts，数据映射层仅仅是通过option的配置来控制，后续绘图就都交给echarts。

使用d3绘图就可以明显感受到分层的好处。假设数据已处理好，使用d3做布局和样式转化，绘图层我们就可以交给专业的绘图库。例如手写css！开玩笑～ 比如：createjs 。甚至使用d3的关系图布局算法，组合g6 绘图能力。只要清楚的各司其职，我们可以发挥每个库的最大能力。（前提是最好是能按需使用的库，好在大多数库都支持）。