(TODO)拓扑可视化的设计要点
定义问题
以业务拓扑结构可视化为例：
大概的诉求是：1，帮助做总览和监控；2，帮助做结构层级和下钻。
具体实现：1关联的问题业务；若有事故，责任到人；服务上，看自己对别人的影响
大概就是 公司所有业务之间的关联关系
之前的设计经验
监控：页面主动推送数据和结论给用户
探索：用户通过交互，主动分析结构
微缩视图
解决宏观+微观的问题。
性能优化
这种性能优化，基本都是那几个套路：
1、通过需求和交互设计解决：提供宏观视图和微观视图；在放大的情况下，通过微观视图查看细节
2、尽量减少文字的绘制，比如显示内容过多时，只显示文字首字母，或者通过颜色区分下节点分类，然后通过tooltip显示节点详情
3、如果是交互卡顿，比如缩放、拖动的情况下卡顿的话，可以考虑在交互过程中，就不要绘制连线和文字，只绘制节点形状；等交互动作停止下来后，再绘制这些内容
4、超出屏幕范围的内容，不进行绘制；比如放大之后，屏幕外的就别画了
如果只是百来个节点，应该是没达到Canvas性能瓶颈的，估计还是文字的缘故，可以试试上面的2、3、4方案。
2023.10.23 甘特图的案例
WBB：有一个问题咨询一下，我们在用G2渲染甘特图，有4000条数据，导致渲染卡顿，这块你们有相关的优化经验么？
给出的回答：
数据量太大的情况下，是否可以考虑：
1、从需求和交互做一些限制，比如只能展示某个时间长度的内容，因为太多了其实已经看不清楚了，从功能上来讲已经不可用了
2、进行数据聚合，根据分类/特性等，将大数据量聚合为小数据量；然后在用户进行交互时(比如放大)，再展示细粒度的数据
LTTB (Largest-Triangle-Three-Buckets)数据聚合算法
https://github.com/sveinn-steinarsson/flot-downsample
3、避免数据监听
确认数据是否写在了响应式里面，数据监听，ref(data)
数据保证全为静态
4、将单个图形拆分为多个图形进行绘制，比如每10行绘制一个实例，通过多个实例拼接形成完整视图
5、增量渲染、延迟渲染
2023.11.10
前端部分：
1、数据聚合
比如采用类似LTTB (Largest-Triangle-Three-Buckets)数据聚合算法，在尽量不降低数据特性的情况下，降低数据量
这里有个示例：
GitHub - sveinn-steinarsson/flot-downsample: Downsample plugin for Flot charts.2、避免数据监听
确保绘图数据为纯静态数据，不要被响应式监听
3、将单个图形拆分为多个图形进行绘制，比如每10行绘制一个实例，通过多个实例拼接形成完整视图，非首屏的实例延迟渲染
4、将绘图层替换为WebGL
看了下G2，有对WebGL做支持：
G2后端部分：
数据做好缓存，请求时直接取缓存，降低数据请求时间
评价指标
1、首次渲染时间
2、交互状态下的帧数(一般不能低于30fps)
3、内存峰值
4、空间利用率(通过布局算法，尽量将图形元素均匀分散到整个屏幕，屏幕上不要出现大段空白区域)
5、重叠率(连线交叉数量、图形与图形之间重叠的数量)
6、如果能从设计维度进行优化，比如提供宏观视图和微观视图；在放大的情况下，通过微观视图查看细节，也可以作为一个加分项