antvis/G6

Do you want to work on this issue?

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

[Bug]: When the amount of data on a custom node is large, the initialization is very slow and the drag and drop is stuck #6731

1055041142 posted onGitHub

Describe the bug / 问题描述

自定义节点数据量较大时(5000 - 10000个节点),初始化很慢,拖拽画布和节点卡顿很厉害。

https://stackblitz.com/edit/react-zfmr8xuw?file=index.js

Steps to Reproduce the Bug or Issue / 重现步骤

1、自定义节点较多时,初始化渲染很慢 2、已经添加了optimize-viewport-transform,拖拽画布、节点还是卡顿 3、自定义节点和线的render函数触发太频繁,如何进行节流操作

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

您提到的问题是关于在使用 antvis/G6 时,自定义节点数据量较大(5000 - 10000个节点)导致初始化缓慢以及拖拽卡顿的问题。以下是一些可能的优化建议:

  1. 优化渲染

    • 确保使用了 optimize-viewport-transform,这可以帮助在视口变换时减少不必要的渲染。
    • 使用 requestAnimationFrame 来优化动画和渲染的频率。
  2. 节流渲染函数

    • 对于自定义节点和线的 render 函数,可以使用节流(throttle)或防抖(debounce)技术来减少函数调用的频率。
  3. 简化节点和边的样式

    • 尽量简化节点和边的样式,减少复杂的图形操作。
  4. 虚拟化

    • 如果可能,考虑使用虚拟化技术,只渲染当前视口内的节点和边。
  5. 分批渲染

    • 将节点和边的渲染分成多个批次,以减少一次性渲染的开销。

如果这些建议仍然无法解决您的问题,可能需要进一步分析具体的代码实现或考虑其他性能优化策略。

如果您有任何进一步的问题或需要更多帮助,请随时告诉我。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] 3 months ago

自定义node、edge相同数量的情况下,初始化速度、拖拽、缩放等方面,5.x比4.x要差好多,卡顿明显。是否有临时解决方案呢,急急急

posted by 1055041142 3 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests