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

5,986 阅读5分钟

数据产品首先也是一个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 绘图能力。只要清楚的各司其职,我们可以发挥每个库的最大能力。(前提是最好是能按需使用的库,好在大多数库都支持)。

数据处理选择

immutable js ; lodash ;underscore;原生;d3 ;似乎这里没有什么太多需要解释。我就不啰嗦了。

附录

antv: antv.alipay.com/zh-cn/index… echarts:echarts.baidu.com
hightcharts:www.highcharts.com/demo
d3: d3js.org
bizcharts: bizcharts.net/index
visjs: visjs.org/
sparkline(嵌入文本中的小图表):omnipotent.net/jquery.spar…
cytoscape: js.cytoscape.org/
immutable:facebook.github.io/immutable-j…