本文深入研究了在D3中处理超大节点数（如十万以上）力导向图的挑战及解决方案。讨论了CPU计算压力、GPU渲染问题，并提出在布局过程中的不同显示策略，包括布局时不显示节点、使用Worker进行计算等。实验结果显示，当节点数达到10000时，布局所需时间显著增加。为解决这一问题，提出了将布局结果存储在服务器、仅显示可视区域节点、使用canvas代替SVG等优化策略，以及按业务数据分片、多Worker和静态布局等其他策略。总结指出，优化超大型图谱布局需要综合考虑多种方法，不断调整以适应特定业务和环境。
基于SVG利用力导向图对节点进行布局，容易导致布局失败的原因有两个：
1. 计算节点位置耗费大量的CPU，导致页面操作冻结；
2. 添加DOM节点到SVG元素时，渲染、重绘会耗费大量的GPU，导致页面直接崩溃；
针对以上的情况，可以采取如下策略：
1. 布局过程中，在页面只显示节点；
2. 布局过程中，在页面同时显示节点与连线；
3. 布局过程中不显示节点与连线，布局完成后显示；
4. 将布局算法放入Worker进行计算，同时显示节点与连线；
表一是各种策略的测试结果，每次布局都添加同样数量节点与连线，见下表。
表一：布局策略的完成时间(单位：毫秒)
| 节点数量\显示方式 | 只显示点 | 显示点与线 | 布局完成后显示 | Worker |
|---|---|---|---|---|
| 1000 | 11301 | 17854 | 6309 | 8313 |
| 2000 | 17854 | 20886 | 6243 | - |
| 3000 | 32831 | 51262 | 8249 | - |
| 4000 | 43536 | 69135 | 10307 | 11395 |
| 10000 | 116512 | 181092 | 36966 | 48890 |
最低0.47元/天 解锁文章
扫一扫
1426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
