一图胜千言—Tcharts 图可视化解决方案

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 实现离屏渲染：