Tcharts即Tvision-T1，是基于Canvas的自研可视化组件。 致力于提供高性能，易定制的企业级可视化解决方案。目前支持“统计图表”，“地图”和“图可视化“组件。本文主要介绍“图可视化”组件部分。目前已应用到“性能观测APM“，“腾讯云CDN“, “腾讯云安全中心“等多个产品中，提供差异化的图可视化解决方案。
1 什么是图可视化？
图是指图论中的图。在离散数据中，图 Graph 是由两个集合 V 和 E 组成(记做 G = (V, E))：V 是 vertex，节点的集合，E 是 edges，边的集合，图是我们描述现实世界中离散课题之间关系的有用工具。把图通过可视化的方式把这种关系呈现出来，即为图可视化。
可视化终极的目标是对事物规律的洞悉。通过可视化表达来增强人们完成某件任务的效率。图可视化通常被应用到社交网络，调用链，网络安全，知识图谱等场景中。
2 图可视化遇到的挑战
在实际业务中，目前遇到的挑战主要有如下四点：
- 渲染性能和交互性能不满足要求
- 节点和链路可表达的视觉通道有限，不能满足复杂业务含义。
- 大数据量导致的视觉混乱，导致无法表现事物规律。
- 定制化能力不足
下面主要针对以上痛点，介绍Tcharts提供的能力和解决方案。
3 Tcharts的图可视化解决方案
3.1 Tcharts的核心架构
在以前的文章中有介绍到Tcharts的架构，为支持图可视化，架构做了一些更新。
场景化组件层：Tcharts底层是不依赖任何技术栈的，可以单独使用。在Tcharts之上封装了react组件和Vue组件，方便不同的技术栈使用。
组件/接口层：提供兼容Echarts的接口和API。除此之外，Tcharts设计了一套更适合拓扑图接口，支持动态更新和更丰富配置和定制化能力。
原子组件层：包括数据展示组件和辅助组件。辅助组件包括坐标轴，图例，tooltip，颜色组件和缩放组件等。该层最核心的设计是数据展示分解，把所有支持用户操作的元素分解为原子组件。原子组件能独立渲染。分解之后，让统计图表，地图和拓扑图组件没有本质差别，一套代码可以实现多种图表类型。
功能组件层：支持事件，动画渲染，辅助线等全局功能。
渲染层： 渲染层支持分层渲染，拓扑图节点和链路的动画支持在单独层渲染，提升渲染性能和交互流畅度。为高性能渲染拓扑节点的图标，渲染层支持了svgPath 转化为canvas绘制的能力。
基础能力层：提供文本处理，丰富的工具类。接口定义，和针对图可视化的丰富的布局能力。
3.2 拓扑图的性能测评
测评采用同样的数据。视图中包括 10000节点19800个链路。在渲染性能和交互流畅度方面具有明显的优势。
3.3 高性能渲染
Tcharts所有原子对象创建完成，并不是立即渲染。而是放在原子组件队列中，等待刷新线程（requestAnimatiomFrame）执行渲染。
局部刷新
- 首先确定节点（或链路）的矩形包围盒
- 清除这个包围盒内的颜色，设置这个区域为 clip 区域
- 重新绘制全部跟这个区域相交的图形
画布中有A,B,C,D,E,F多个元素。C移动位置，重绘的只有B,C,D三个元素。只需把虚线框内的区域清除，在虚线框的区域创建裁剪区域（使用clip()方法），再绘制B,C,D。
下面的视频，通过给画布增加一个网格线，来演示Tcharts拖拽节点位置，局部刷新的过程。
在Tcharts中，所有需要局部刷新的元素，都实现接口LocalElement。
把所有需要局部刷新的元素添加到对应Layer中。
Layer类中，计算重绘区域的核心代码：
刷新线程会遍历所有Layer，执行局部的重绘。
仅绘制可视范围
界面渲染的时候，只渲染用户可见的区域。不可见区域，只有在“拖拽画布“或“拖动滚动条“变为可见的时候，才会进行渲染。如果拖拽有卡顿，可以设置缓冲区域，提升交互体验。
高性能渲染节点图标
Tcharts通过解析SVG Path, 转化 canvas绘制，避免了SVG图表的loading过程，提升渲染的性能。
path支持的命令有9个，分别是
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
大写表示命令的参数是绝对的，小写表示参数是相对的。使用相对位置的原因是为了节省空间，比如（10000，10000）这个顶点用很多个0去表示，如果这个点相对上个点才偏移(10, -1)，这就省下了好几个字符。
例如： M100 100表示移动到 x=100， y=100的位置。m100 100 表示移动到相对于前一个点x 100， y 100的地方。
SVG path 转换可以参考yaoherlu总结：
https://km.woa.com/group/51559/articles/show/494638?kmref=search&from_page=1&no=3
3.4 高性能交互
- 分层渲染
链路和节点的动画，在单独的层渲染，频繁的刷新不影响核心绘制层。
下图为节点动画的例子：
播放
- Hover事件优化
拓扑图的鼠标Hover事件与折现图的事件不同，不需要实时显示tooltip。hover事件增加100ms的延迟。
- 相交判断优化
鼠标Hover和选中事件，判断是否与某个对象相交。判断的过程中，只需要遍历用户当前可见的对象。
3.5 视觉通道有限
节点和链路可表达的视觉通道有限，不能满足复杂业务含义。
Tcharts对显示样式和交互做了整体规划。节点大小，颜色，描边，底色，角标多种组合灵活满足业务需求。
3.6 大数据的视觉混乱，导致无法表现事物规律。
- “聚合节点”让数据量变少。支持展开分组方式，或直接展示。
展示聚合节点的时候，右上角“角标“展示该节点包含的子节点数。点击角标展开聚合节点。
聚合节点展开后，可以在一个分组中展示。也可以直接显示为多个节点。
- 链路支持折叠或展开，减少链路的复杂性。
点击链路的卫星图标，展开链路。显示更多节点和链路。
- 优化后的效果对比
3.7 Tcharts的定制化能力
Tcharts的节点形状支持定制：style:{width:40, height:40, shape:'rectangle' }
shape支持圆型，矩形，圆角矩形，椭圆形等。
除以上内置的形状外，Tcharts还支持hooks注册对应的原子组件子类对节点进行自定义。
实现其对应的draw方法，通过自定义的方式实现自己的节点样式。
4 支持百万级图可视化分析的规划
虽然canvas渲染引擎性能相比SVG来说，性能优异。但对于图分析的场景，当数据量达到几十万或者上百万的时候，仅仅靠CPU的计算能力无法达到要求了。Tcharts在下一版本将会支持WebGL和Webworker。特别是支持并行计算的场景，WebGL和Webworker将发挥性能优势。
4.1 GPU 和 CPU 的性能对比
图片来自：https://www.techpowerup.com/199624/nvidia-to-launch-geforce-337-50-beta-later-today
在 Web 端使用 GPGPU，因为目前WebGPU还在实验中，目前商用只能使用WebGL，使用WebGL可以实现高性能计算，高性能布局操作。
但是WebGPU是未来的趋势，WebGPU时代即将到来，现在学习，时间正好！
Babylon.js team官方支持了WebGPU渲染
Three.js team官方支持了WebGPU渲染
4.2 Web Worker交互优化
Web Worker可以使计算渲染分离。布局算法，图分析等高密集的计算会使 CPU 使用率达 100%，浏览器无法响应，光标无法移动，从而无法正常进行其他交互。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。
Web Worker 实现离屏渲染：
