G6 icon indicating copy to clipboard operation
G6 copied to clipboard

[Bug]: fund-flow 示例流程图问题,默认收拢的流程图无法点击+号在画布右侧展开

Open windyfay opened this issue 4 months ago • 3 comments

Describe the bug / 问题描述

网站示例场景中的资金流向图,点击最后一层节点的+号时无法在画布右侧展开,会定位到root节点,后续一层无法展示

Reproduction link / 复现链接

https://g6.antv.antgroup.com/examples/scene-case/default/#fund-flow

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

No response

Version / 版本

🆕 5.x

OS / 操作系统

  • [ ] macOS
  • [ ] Windows
  • [ ] Linux
  • [ ] Others / 其他

Browser / 浏览器

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

windyfay avatar Oct 21 '25 06:10 windyfay

@windyfay 您好!以下是关于您问题的自动回复:

感谢您的反馈!针对您提出的 fund-flow 示例流程图在最后一层节点点击 + 号无法在画布右侧展开的问题,以下是分析和建议:


问题分析

1. 节点展开交互逻辑

G6 的节点展开功能通常通过 graph.expandElement(id, options) 方法实现。该方法支持动画和位置保持选项,理论上应能正常展开任何层级的节点。

2. 展开失败的可能原因

  • 画布渲染未正确更新:展开后未及时调用 graph.draw()graph.render(),导致新节点未显示在画布右侧。
  • 布局配置问题:布局(如 tree、grid 等)未对新增节点位置合理计算,可能会导致节点被重定位(如回到 root 节点附近)。
  • 节点数据未正确更新:展开操作后,节点数据未正确传递或渲染,导致下一层未显示。

3. 定位到 root 节点原因

  • 布局算法没有为新展开的节点分配合适的空间,导致画布重绘时所有节点偏移回根节点。
  • 部分布局(如 tree)在展开/收拢时会重新计算所有节点位置。如果未设置 position 或 align 参数,可能出现位置错乱。

建议解决方案

  1. 检查数据更新流程
    确认点击 + 号后,实际触发了 graph.expandElement 并正确更新了节点数据。

  2. 确保画布重绘
    展开节点后应调用 graph.draw()graph.render(),确保新状态实时反映到画布上。

    await graph.expandElement(nodeId, { align: true });
    await graph.draw();
    
  3. 优化布局设置
    如果使用 tree 或 grid 布局,可通过 layout 的 position/align 参数为新节点指定合理位置,避免节点回到 root 区域。

    layout: {
      type: 'grid',
      align: true, // 保持已展开节点相对位置不变
      // 或为特定节点指定位置
      position: (node) => node.id === 'expanded-node-id' ? { row: 2, col: 4 } : undefined,
    }
    
  4. 事件处理优化
    使用事件委托监听节点的展开事件,确保每次点击 + 号时都能正确执行展开并重绘操作。

    graph.on('node:click', (evt) => {
      const { target } = evt;
      if (target.expandable) {
        graph.expandElement(target.id, { align: true });
        graph.draw();
      }
    });
    

参考文档


后续建议

  • 建议升级到最新版 G6 以获得更好的布局和交互支持。
  • 如果仍有问题,建议提供自定义布局配置或关键代码片段,便于进一步定位问题。

如需详细代码示例或有其他疑问,欢迎补充说明!


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

github-actions[bot] avatar Oct 21 '25 06:10 github-actions[bot]

新节点没有位置信息,如果直接按照被展开节点位置算的话,可能会出现节点重叠的情况。那这就得重新渲染整个树,交互上可能又不太友好~

lyw405 avatar Oct 23 '25 12:10 lyw405

创建新节点的位置需要知道被展开节点的位置,被展开节点的位置需要执行布局计算后才知道,布局计算需要所有的节点都在(包括新节点),但新节点的位置需要知道被展开节点的位置。 感觉布局系统的代码底层得重构了。

lyw405 avatar Oct 24 '25 09:10 lyw405