关于前端数据可视化的一些理解——浅析

[Hibop]

以前的一些理解

提纲（基础）

• 什么是可视化
• 可视化场景与工具
• 怎样可视化
• 可视化过程中的常见问题

一、什么是可视化(Data Visualization)

定义： 将大量离散或者连续数据转化为有联系、可交互的图形或图像，增强表达方式和人为认知，从而达到实现从数据到分析、发现、决策、学习等目的；

• 数据是源， 可视化过程是桥梁，图形分析、决策、学习是根本目的
• 实质是IO： fn(data) => UI

广义数据可视化涉及信息技术、自然科学、统计分析、图形学、交互、地理信息等多种学科。

“科学可视化（Scientific Visualization）、信息可视化（Information Visualization）和可视分析学（VisualAnalytics）三个学科方向通常被看成可视化的三个主要分支。这三个分支整合在一起形成的新学科“数据可视化”，是可视化研究领域的新起点。”——《数据可视化》

狭义： 数据可视化是 数据（dataset） 到 视觉元素(visualMap) 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）
常用的视觉元素（visualMap）：
图形类别（symbol）、图形大小（symbolSize）
颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、
颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）

二、可视化场景与工具

1. 通用报表 （85%以上的需求）： 国内BI（Business Intelligence 商务智能）主要场景
2. 移动端图表
3. 大屏可视化
4. 关系图： 图编辑&图分析 topo图
5. 地理可视化： 比如位置业务
6. 3D沉浸式：比如看房、上帝视角

工具

• g2、Echarts、d3、vis、hightChart...
• g2框架封装：bizcharts(react) viser(vue)
• 移动可视化: f2 适配问题
• 图编辑： d3 joint : 节点渲染，box事件交互、布局（树布局、力导布局）
• 地理可视化： g2、L7、高德的 Loca、 菜鸟的 鸟图
• 3D：three.js

三、怎样可视化

数据可视化过程可以分为下面几个步骤：

1. 定义要解决问题, 建模;

• 趋势 对比 分布
• 流程 时序 空间
• 关联性

2. 确定要展示的数据和数据结构，数据采集;

   数据要有，但是画布大小限制，过量不能直接显示且渲染性能，故要filter数据
   有几个问题：

• 数据是否加工好？
• 是否空值？
• 1对1还是1对多： 列表or树
• 数据规模？
• 是否要聚合和分层展示数据？
• 数据初始化渲染和patch更新？

3. 确定要展示的数据的维度（字段），数据清洗;

• 确定数据分类：
  有序性 间隔 比例 连续性 数字 时间 对数 指数

4. 确定使用的图表类型，单帧渲染;
5. 确定图表的交互，多帧动画、人机交互;

具体到前端界面：

四、常见的问题

1. 分类过多的场景 不适用饼图; 数据数量级相差较大 不适合折线图（折线趋势最好不要太陡峭） 可以柱状 或者取对数; 数据太过平缓难以看到趋势，可以调整数据展示范围

2. 数据量太大怎么办？

在前端做的可视化，能做的仅仅是小规模数据的可视化，如果你遇到超大规模数据要进行可视化，那么可以选择：

• （1）数据分层
• （2）数据聚合
• （3）数据抽样
• （4）增量渲染代替全量渲染

3. ssr(服务端渲染)

静态图片，截图，大数据量少交互的数据可以在考虑ssr

• 服务端渲染可以使用流行的 headless 环境： puppeteer、headless chrome、node-canvas、jsdom、PhantomJS

4. 渲染器： canvas OR svg (向下兼容可能会html/xml)

Canvas 提供的绘图能力更底层，适合做到像素级的图形处理，能动态渲染和绘制大数据量的图形。而 SVG 抽象层次更高，声明描述式的接口功能更丰富，内置了大量的图形、滤镜和动画等，方便进行文档元素的维护，也能导出为文件脱离浏览器环境使用。

性能差异：
网上有不少 Canvas 和 SVG 性能对比的文章，得出的结论大体是“Canvas 性能更好，适合更大量数据的渲染”。其实这么说是有失偏颇的。性能对比要看场景。从底层来看，Canvas 的性能受画布尺寸影响更大，而 SVG 的性能受图形元素个数影响更大。下图是微软 MSDN 上给的一个对比图。

定制和交互:
比较流行的看法是 SVG 做定制和交互更有优势，因为有类似 DOM 的结构，能快速应用浏览器底层的鼠标事件、CSS 样式、CSS3 动画等。不过基于 Canvas 做上层封装后也能实现类似的定制和交互，并且自由度更高。

对于大数据量，您推荐使用svg吗？对于频繁操作dom有什么好建议？
我是一个链接

• 先试试 svg，撑不住再试试 canvas；
• 频繁操作 dom 的解决办法可以借鉴 dom diff或者 vdom diff的解决方案；
• 用数据驱动diff再局部更新视图，操作 dom 变成操作数据；
• svg的优势是自适应+内存占用低，（移动端较友好）；
• dom的优势是像素级细节操作+多帧交互，（炫光尾迹，热力图）

5. react、vue等数据驱动型单向数据流类的框架与d3、echart直接DOM操作的一些冲突

三种解决方案：

1. React 渲染⼀一个空 div 作为容器， 容器中的 DOM 数据/操作/渲染 都由 D3 负责
   

2. React负责DOM和SVG的结构，D3负责数据和布局的计算
   
   

3. react-faux-dom ：react 高阶组件
   仿制一层虚拟 DOM 可供 D3 操纵， 同时把这层 DOM 套上状态管理理传给 React
   

4. 其他三方解决方案

• victory
• VX
• nivo
• Recharts

五、可视化奋斗方向：

• 不是熟练api调用和框架的使用， 而是可以撸一个可视化引擎为奋斗目标；

• svg canvas webgl 共性的 matrix 变换是否了解？

• canvas 和 webgl 里的事件绑定怎么处理？

• 像素级别事件和box级别事件怎么处理？

• 2d 和 3d的事件绑定有什么差异？

• 滤镜怎么做？原理是什么吗？高斯模糊有几种方式？

• 贝赛尔曲线相关原理和作用？贝塞尔曲线包围盒计算？贝塞尔曲线相交检测？

• vector2d 和 vector3d 所有的方法的几何意义？

大屏数据可视化示例

• https://yyhsong.github.io/iDataV/
• https://github.com/yyhsong/iDataV