G6
G6 copied to clipboard
使用radial-layout渲染超过2000条数据,首次加载很慢
问题描述
我使用react结合G6 我要实现的功能是本地上传dgml文件,完成后并使用radial-layout渲染数据 现在问题是大概1000左右的nodes和edges,首屏加载数据需要超过3分钟以上的时间 这个有解决方案吗?
使用Grid是正常的,但是项目要求radial-layout
重现链接
无
重现步骤
无
预期行为
希望可以友好的加载数据
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频(可选)
补充说明(可选)
No response
hi @727998364, welcome!
Hi @727998364, Please star this repo if you find it useful! Thanks :star:! 你好 @727998364。如果该仓库对你有用,可以 star 一下,感谢你的 :star:!
我上传的文件中node就只有id 和 label,edge只有source 和target
三分钟有点夸张,给个 mock 的数据看看?
Grid 可以正常打开 https://stackblitz.com/edit/react-ebyyeb?file=index.js radial-layout https://stackblitz.com/edit/react-hckgok?file=index.js 页面直接无响应了
看了一下是 radial 布局中使用到了一个初始化位置的算法 MDS,其中的奇异向量分解计算量特别大所以很慢,给 radial 布局新加了一个配置,可以关闭这个初始化计算,initWithMDS: false,这样你给的这份数据布局时间可以下降到 30s 左右。因为 radial 需要计算两两节点之间的最短路径,所以不可避免的还是存在不小的计算量的。
下面 demo 点击画布切换大数据:https://codesandbox.io/s/youthful-fire-6cmxmz?file=/index.js
你好,如果初始化的时候就渲染我的那份数据,渲染还是非常慢,页面还是提示无响应,即使加了initWithMDS: false https://stackblitz.com/edit/react-ebyyeb-wsyyc3?file=index.js 这个初始化我先渲染一个数据少的 点击画布再切换数据多的
我实际项目使用过程中 会有数据过滤,当切换全量数据时 graph.clear(); 不起作用 画布上会有之前渲染的数据,是不是G6不会清除先前的画布元素,而只是加载新的数据,导致新旧元素重叠显示? 另外我们会切换layout 全量数据从其他的切到radial 就特别慢 从radial切换其他的layout正常(所有的都添加了initWithMDS: false)
由于项目中上传文件数据可能会更多,我看官网有这个例子 但是源码访问不了 https://antv-g6.gitee.io/zh/largegraph