antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

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

727998364 posted onGitHub

问题描述

我使用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 ... ]

屏幕截图或视频(可选)

image

补充说明(可选)

No response


hi @727998364, welcome!

posted by github-actions[bot] over 1 year ago

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

posted by github-actions[bot] over 1 year ago

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

posted by 727998364 over 1 year ago

三分钟有点夸张,给个 mock 的数据看看?

posted by Yanyan-Wang over 1 year ago
posted by 727998364 over 1 year ago

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

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

posted by Yanyan-Wang over 1 year 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

posted by 727998364 over 1 year ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests