[Bug]: V5.0.50 性能渲染bug 同样的数据2000个节点附带label，用V4.0渲染就没问题，用V5.0直接崩了，非常卡顿，也没配置什么，都是基础配置

[LdMessageson]

Describe the bug / 问题描述

Reproduction link / 复现链接

No response

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

No response

Version / 版本

Please select / 请选择

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[github-actions]

@LdMessageson 您好！以下是关于您问题的自动回复：

您好，感谢反馈 G6 V5.0 在大规模节点和标签渲染时的性能问题。以下是针对您的情况的专业回复与优化建议：

---

📝 问题分析

• 现象：同样的数据（约 2000 节点，均含 label），V4.0 能流畅渲染，V5.0 出现明显卡顿甚至崩溃。
• 初步判断：V5.0 在节点或 label 渲染流程有性能回退，或基础配置未优化。

---

🔍 优化建议

1. 减少节点标签渲染压力

   • 标签是性能瓶颈，建议：
     • 设置合理的 labelFontSize，避免过大或字体过多。
     • 如非必要可只在高亮或选中时显示 label。
     • label 字段建议用简短文本。

   node: {
     style: {
       labelText: (d) => d.data.name.length < 10 ? d.data.name : '',
       labelFontSize: 12,
       labelFill: '#333',
     }
   }

2. 使用高性能布局

   • 对于大规模数据，推荐 grid 或 circular 布局，避免动画且关闭 overlap 检查（如无重叠需求）。
   • 示例：

   layout: {
     type: 'grid',
     preventOverlap: false
   }

3. 关闭动画和特效

   • 动画等视觉效果会显著影响性能，建议关闭：

   animation: false,

4. 启用画布插件（如 Minimap）便于大图导航

   • 这不会影响性能，但能提升交互体验：

   plugins: ['minimap'],

5. 基础配置建议

   • 保持画布尺寸合适，开启 autoFit：

   width: 1200,
   height: 800,
   autoFit: true,

6. 升级配置 API

   • V5.0 的数据 API、行为 API 与 V4.0 不兼容，务必使用新版方法，如下：

   // 设置数据和渲染
   graph.setData(data);
   graph.render();
   
   // 行为配置
   graph.setBehaviors(['drag-canvas', 'zoom-canvas', 'drag-element']);

---

⚠️ 版本差异说明

• V5.0 移除了部分旧 API（如 data, changeData, setMode），请用新版方法。
• label 渲染底层实现有更新，可能导致性能回退，官方后续可能会优化此部分。

---

🧑‍💻 推荐基础代码模板（V5.0）

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 1200,
  height: 800,
  autoFit: true,
  data, // 请确保数据格式与 V5.0 规范一致
  node: {
    type: 'circle',
    style: {
      labelText: (d) => d.data.name.length < 10 ? d.data.name : '',
      labelFontSize: 12,
      labelFill: '#333',
    }
  },
  edge: {
    type: 'line',
    style: {
      stroke: '#e2e2e2',
      lineWidth: 1
    }
  },
  layout: {
    type: 'grid',
    preventOverlap: false
  },
  animation: false,
  plugins: ['minimap'],
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element']
});

graph.render();

---

📬 后续建议

• 如仍有性能瓶颈，建议提供最小复现 demo 或数据，以便社区或官方进一步定位问题。
• 可关注 AntV G6 项目 是否有类似问题反馈，或官方性能优化进展。

---

如需进一步协助，请补充您的配置详情或可复现的数据样例。感谢您的支持！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[github-actions]

@LdMessageson 您好！以下是关于您问题的自动回复：

感谢反馈！我们已收到关于 G6 V5.0 在渲染含有 2000 个节点且带 label 时性能严重下降的问题。下面为您详细分析，并提供优化建议和后续处理方向：

---

一、问题分析

• V4.0 正常 / V5.0 卡顿甚至崩溃：V5.0 对渲染架构进行了较大升级，但在大规模节点且每个节点含 label 的场景下，label 渲染会极大消耗性能，尤其在基础配置下未做任何优化时表现更为明显。
• label 渲染：标签本身需要多次文本计算与绘制，且 V5.0 的 label 支持更丰富样式，默认开销较大。

---

二、优化建议

1. 提升 label 性能

   • 设置 label 渲染的 throttle 节流参数，如：

     node: {
       style: {
         throttle: 100, // label 更新节流，降低绘制频率
       }
     }

   • 如果标签内容较长或样式复杂，建议精简 label 样式、关闭 label 背景等附加效果。
   • 可以只在关键节点或 hover 时显示 label，非全部常显。

2. 基础节点配置优化

   • 降低节点 size，例如 20~40（避免 default 过大）。
   • 简化节点样式（去除阴影、渐变、复杂边框等）。
   • 批量渲染：配置 batchKey，如

     style: {
       batchKey: 'node'
     }

   • 关闭动画、只保留基础交互行为（如拖拽、缩放）。

3. 渲染流程建议

   • 使用异步渲染、监听 BEFORE_RENDER/AFTER_RENDER 事件，增加 loading 提示。
   • 如节点/label数量极大，建议使用 SSR（服务端渲染）或分批加载。

4. 视口优化

   • 开启 optimize-viewport-transform 行为，仅渲染视口内元素，有效减少同时绘制的节点数量。

---

三、已知问题与后续跟进

• V5.0 性能 bug 追踪：目前已知 V5.0 在大量 label 场景下存在性能瓶颈，官方正在持续优化。建议关注 G6 官方 issue 和 changelog，及时获取补丁。
• 临时解决方案：如需立即解决，建议：
  • 降级使用 V4.0
  • 或按上述建议优化配置

---

四、配置参考示例

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 1200,
  height: 800,
  animation: false,
  autoFit: 'view',
  data,
  node: {
    type: 'circle',
    style: {
      size: 20,
      fill: '#5B8FF9',
      labelText: (d) => d.data.name,
      throttle: 100, // label 更新节流
      // labelBackground: false, // 尽量关闭复杂 label 效果
    }
  },
  behaviors: [
    'drag-canvas',
    'zoom-canvas',
    {
      type: 'optimize-viewport-transform',
      shapes: (type, shape) => type === 'node' && shape.className === 'key'
    }
  ],
});
await graph.render();

---

五、后续处理

• 如需进一步排查，请补充您的数据结构和具体配置代码
• 如优化后仍有性能异常，可上传最小复现 demo（推荐 Codesandbox/Github 链接），便于定位问题

---

感谢您的耐心反馈！如需更多帮助，欢迎继续留言。

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[yvonneyx]

用的哪个布局

[LdMessageson]

和布局没有关系，任何布局都会这样，V4相对来说不卡顿，V5直接卡死。

[binxie33]

同样的问题，现在只能限制渲染数量到200个节点，超过这个数字基本上就不能用了。。。