search

antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.03k stars 1.31k forks source link

使用radial-layout渲染超过2000条数据，首次加载很慢 #5028

Open 727998364 opened 11 months ago

727998364 commented 11 months ago

问题描述

我使用react结合G6 我要实现的功能是本地上传dgml文件，完成后并使用radial-layout渲染数据 现在问题是大概1000左右的nodes和edges，首屏加载数据需要超过3分钟以上的时间 这个有解决方案吗？

使用Grid是正常的，但是项目要求radial-layout

重现链接

无

重现步骤

无

预期行为

希望可以友好的加载数据

平台

屏幕截图或视频（可选）

image

补充说明（可选）

No response

github-actions[bot] commented 11 months ago

hi @727998364, welcome!

github-actions[bot] commented 11 months ago

Hi @727998364, Please star this repo if you find it useful! Thanks :star:! 你好 @727998364。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!

727998364 commented 11 months ago

我上传的文件中node就只有id 和 label，edge只有source 和target

Yanyan-Wang commented 11 months ago

三分钟有点夸张，给个 mock 的数据看看？

727998364 commented 11 months ago

Grid 可以正常打开 https://stackblitz.com/edit/react-ebyyeb?file=index.js radial-layout https://stackblitz.com/edit/react-hckgok?file=index.js 页面直接无响应了

Yanyan-Wang commented 11 months ago

看了一下是 radial 布局中使用到了一个初始化位置的算法 MDS，其中的奇异向量分解计算量特别大所以很慢，给 radial 布局新加了一个配置，可以关闭这个初始化计算，initWithMDS: false，这样你给的这份数据布局时间可以下降到 30s 左右。因为 radial 需要计算两两节点之间的最短路径，所以不可避免的还是存在不小的计算量的。

下面 demo 点击画布切换大数据：https://codesandbox.io/s/youthful-fire-6cmxmz?file=/index.js

727998364 commented 11 months ago

你好，如果初始化的时候就渲染我的那份数据，渲染还是非常慢，页面还是提示无响应，即使加了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