G6展示网络拓扑图，适配大数据量的方案

接手之初，整体样式：

但当数据量变大时，渲染速度慢，且容易卡死浏览器，导致崩溃。大概支持500个节点。

通过浏览器performance工具分析得知，是由于comboForce（分组力导布局）算法冗余。只能通过更改布局或其他方式规避。

解决方案：

1、创建自定义布局

在原本conboForce的基础上，重新对combo内部的节点布局进行计算。如gird等布局方式。但由于comboForce布局算法对于节点位置的计算同样影响combo的位置。且代码中有很多地方不理解。pass。

2、Gird布局 + 组包裹（Hull）

通过阿里对于容器云安全可视化的解决方案，文档中是通过包裹的方式，如下图：

优点：渲染速度快，支持数据量大，5000+。

缺点：数据量小，且整齐的情况下，效果很好；但是当数据量变大，组的包裹无法分清，且存在同组内换行的情况。组包裹无法展label。

由于问题点多，继续尝试其他方式。

3、力导布局 + 类聚

在改动过程中发现该布局方式，由于力导布局的算法都会涉及到位置计算，并未报太大希望。

实现结果：

缺点：在渲染之初，力导图会有计算的动画。

优点：支持数量量变大 3000+（相比于最初），渲染速度快 3000个node，大概35s-45s。且在 3000数据量的情况下，布局正常。

G6配置

const graph = new G6.Graph({container: "gContain",width: this.$refs.baro.offsetWidth, // Number，必须，图的宽度height: this.$refs.baro.offsetHeight, // Number，必须，图的高度plugins: [tooltip],autoPaint: true,fitCenter: false,modes: {default: ["drag-combo", { type: "drag-node", onlyChangeComboSize: true }, { type: "drag-canvas", scalableRange: -1 }, "zoom-canvas"]},fitView: false,layout: {type: "force",clustering: true,clusterNodeStrength: -5,clusterEdgDistance: 200,clusterNodeSize: 100,clusterFociStrength: 15,nodeSpacing: 20,preventOverlap: true},defaultEdge: {type: "cubic",style: {endArrow: true,stroke: "#c0c0c4"}},defaultNode: {size: 58,type: "tenNode",style: {opacity: 1,lineWidth: 1.3,fill: "#23b899"}},defaultCombo: {// ... 其他属性style: {fill: "#e6e7ea",lineWidth: 2,stroke: "#e6e7ea"// ... 其他属性},labelCfg: {position: "top",refX: 0,refY: -20,style: {fontSize: 24}}}})

G6展示网络拓扑图，适配大数据量的方案相关推荐

oracle大数据量删除方案
oracle进行大数据量删除的时候,容易报错表temp表空间空间不够导致删除失败,此时的处理方案有: 方案一: 分批删除,提交之后继续执行方案二: 当剩下的数据量小于待删除的数据量时,可以使用转表的 ...
优化大数据量查询方案——SpringBoot（Cloud）整合ES
一.Elasticsearch简介实际业务场景中,多端的查询功能都有很大的优化空间.常见的处理方式有:建索引.建物化视图简化查询逻辑.DB层之上建立缓存.分页-然而随着业务数据量的不断增多,总有那么 ...
B端大数据量查询优化方案
文章目录背景解决方案方案1:分库分表+搜索能力方案2:分区+搜索能力分区搜索整体方案总结背景在一些业务场景中,一开始业务量并不大,可见性的几年内不会突破非常大的数量,所以一开始设计 ...
mysql大数据量迁移方案
使用navicat等客户端软件功能进行同步使用mysqldump进行导出导入同步使用mysq命令的into file,load file进行同步命令数据量不大可以用navicat,mysqldu ...
【转载】高效能，大数据量存储方案SqlBulkCopy
前些日子,公司要求做一个数据导入程序,要求将Excel数据,大批量的导入到数据库中,尽量少的访问数据库,高性能的对数据库进行存储.于是在网上进行查找,发现了一个比较好的解决方案,就是采用SqlBulk ...
EasyExcel 低内存导出大数据量的Excel方案探索 50万行 50列（附：实现代码）
文章目录 1.前言 2.准备工作 3.导出测试 3.1.单次查询.全量导出 3.2. 多次查询,多个文件,单次写入 3.3.多次查询,多个文件,多次写入 3.4.多线程导出探索 3.5.文件打包成ZI ...
gRPC大数据量消息传递方法
1.摘要本文探讨了gRPC中大数据量消息的传输限制及相应的两个解决方法:修改限制值大小和流式数据传输,并给出了gRPC C++版本下采用流式数据传输的示例代码,在该示例中同时说明了如何在Visual ...
echarts框架下大数据量展示的解决方案
echarts+大数据量.这是个无解的问题! 大数据量,什么样的数据才算大呢?在echart 4.5.0版本中,画折线图,数据线一共1001000条,每条数据5002200个数据点,即最小数据5000 ...
怎样提高WebService性能大数据量网络传输处理(转)
1. 直接返回DataSet对象特点:通常组件化的处理机制,不加任何修饰及处理: 优点:代码精减.易于处理,小数据量处理较快: 缺点:大数据量的传递处理慢,消耗网络资源: 建议:当应用系统在内网. ...