6月份的时候产品需求一直处于讨论期，开发任务较轻，就开始研究系统中网络节点拓扑图在上千节点时卡死的问题。目前针对这块的技术选型用的是sigma.js + linkurious.js，这两个项目时间都有些久远，但是由于我们业务性很强需要高度定制化，用这两个库是最方便直接的了。一般情况下，canvas对于千级节点全量渲染应该是没问题的，但是涉及交互计算就完全无法操作了。这里有篇文章针对万级节点渲染方案给了我很大的启示万级节点可视化全量渲染优化探究
，这篇文章在节点渲染和D3.js力学计算布局的方案可以说是分析得很极致了，最大程度上优化了渲染性能。
分析测试后发现，千级节点性能问题主要在三个方面，一是力学布局计算，二是对节点做拖拽、选中等操作时就卡死，三是渲染出图慢。在渲染出图方面，同样量级的节点渲染在webgl的效率明显更高，在上面那篇文章中也提到了。在交互操作方面，我这里测试了5000个节点的拖拽、选中、框选等功能，也是没有问题的。在力学布局计算方面，也是考虑放入worker中计算，不至于系统卡顿，但是我们这里需要在计算完毕出图后才能进行后面的操作，所以这里暂不把这部分纳入库中。综上选择了webgl作为渲染技术，由于webgl写起来太底层，最终选择threejs作为基础库来封装。
系统需求上不仅需要对节点做操作，还需要对边做独立操作，目前开源的可视化库大部分都是基于canvas2D的，并且节点和边大都是绑定起来操作的，对边独立操作很少，所以就需要自己来造轮子了。threejs基础库对于图形的交互封装很少，都是通过Raycaster来实现图形的拾取，然后通过EventDispatcher来进行事件传递。不过threejs有很多exmaple，节点和边需要的操作大都能在里面找到相关文件，修改一下就可以直接拿来用了。
从学习webgl基础，到熟悉threejs，再到实际开发库，重构项目，历时2个多月完成了新旧模块替换，在保有原来功能的基础上提供了更多的扩展接口，以前无法操作的数据量已可以快速渲染和操作。这个基于threejs的网络节点拓扑图库network-graph仓库地址：https://github.com/Youhandan/network-graph，具体的使用方法写在readme里面，这是自己写的第一个通用工具库。
这里面有两个难点，一个是边粗细的问题，线宽无论设置多大，渲染出来都是1个像素点，在threejs的issure里最近也有了解决方案，具体也是将线变成三角形分割的图形，以此来实现线宽变化，这里已经将源代码实现方法包装在库里了。另一个是曲边绘制，QuadraticBezierCurve曲线中controlPoint如何计算的问题，当两点距离随着拖拽变化时，曲度变化问题。再有就是项目中两点见带方向的多曲边的解决方案，参照图数据库的可视化呈现方式，其中涉及到线性代数，图形学的一些知识花费了较多的时间。
网友评论