[Bug]: 树形布局，节点收起后，收起的节点所占用的空间没有被收回

[kaisela]

Describe the bug / 问题描述

事例代码：
import { Graph, treeToGraphData } from '@antv/g6';

/**

• If the node is a leaf node
• @param {*} d - node data
• @returns {boolean} - whether the node is a leaf node
  */
  function isLeafNode(d) {
  return !d.children || d.children.length === 0;
  }

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
container: 'container',
autoFit: 'view',
data: treeToGraphData(data),
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
node: {
style: (d) => {
const style = {
labelText: d.id,
labelPlacement: 'right',
labelOffsetX: 2,
labelBackground: true,
ports: [{ placement: 'top' }, { placement: 'bottom' }],
};
if (isLeafNode(d)) {
Object.assign(style, {
labelTransform: [
['rotate', 90],
['translate', 18],
],
labelBaseline: 'center',
labelTextAlign: 'left',
});
}
return style;
},
animation: {
enter: false,
},
},
edge: {
type: 'cubic-vertical',
animation: {
enter: false,
},
},
layout: {
type: 'compact-box',
direction: 'TB',
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 80;
},
getHGap: function getHGap() {
return 20;
},
},
});

graph.render();

});

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]

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

您好，感谢您的反馈与详细说明！

针对您提出的 “节点收起后，收起的节点所占用的空间没有被收回” 问题，分析如下：

---

🧐 问题分析

• 您使用了 compact-box 布局，并启用了 collapse-expand 行为，希望在收起节点后，子节点所占空间能够被正确释放，使树图布局紧凑。
• 但当前表现是：收起节点后，原本子节点占用的空间依然存在，导致树图出现空白间隔。

---

📚 原因说明

1. 布局未实时更新
   收起/展开节点后，compact-box 布局会重新计算节点的位置和间距。如果没有触发布局刷新，空间不会被回收。

2. collapse-expand 行为默认逻辑
   G6 的 collapse-expand 行为仅改变节点的 collapsed 属性，实际布局更新需手动触发。

3. 数据结构要求
   树图收起时需要确保子节点在数据中被移除或标记为不可见，否则布局计算时仍会保留其空间。

---

✅ 解决方案建议

请参考以下方法，确保收起节点后布局能自动刷新、空间被回收：

1. 配置 collapse-expand 行为，自动刷新布局

const graph = new Graph({
  // ...其它配置
  behaviors: [
    {
      type: 'collapse-expand',
      onCollapse: (id) => {
        // 收起后，重新布局
        graph.layout();
      },
      onExpand: (id) => {
        // 展开后，重新布局
        graph.layout();
      },
    },
    // 其它行为
  ],
  // ...其它配置
});

2. 确认节点数据结构

• 收起节点时，需将子节点从数据结构中移除或设置 collapsed: true。
• 推荐使用 G6 的树图模式（通过 treeToGraphData），系统会自动处理可见性。

3. 触发布局刷新

• 在收起/展开节点后，使用 graph.layout() 触发布局刷新，节点空间会自动回收。

4. 调整布局参数（如间距）

• 可根据需求调整 getVGap、getHGap 等参数，确保布局紧凑。

---

💡 示例代码

const graph = new Graph({
  // ...其它配置
  behaviors: [
    {
      type: 'collapse-expand',
      onCollapse: (id) => {
        // 节点收起后，刷新布局
        graph.layout();
      },
      onExpand: (id) => {
        // 节点展开后，刷新布局
        graph.layout();
      },
    },
  ],
  layout: {
    type: 'compact-box',
    direction: 'TB',
    getHeight: () => 16,
    getWidth: () => 16,
    getVGap: () => 80,
    getHGap: () => 20,
  },
  // ...其它配置
});

---

📝 总结

• 请确保在节点收起/展开时，调用 graph.layout() 刷新布局。
• 推荐使用 G6 的树图数据结构和 collapse-expand 行为。
• 如问题仍未解决，可补充 G6 版本号、浏览器环境等信息，或附上更详细的复现代码。

---

如需进一步帮助，请随时回复！
感谢您的支持与反馈 🙏

---

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

[github-actions]

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

感谢您的反馈和详细描述！

根据您的 issue 情况和代码，您的问题是：

树形布局（compact-box），节点收起（collapse）后，收起的节点所占用的空间没有被收回，导致布局出现空白。

---

原因分析

在 G6 的 compact-box 树形布局中，节点收起时，理论上应该重新计算布局，使收起的节点及其子树不再占用空间。但如果 collapse 行为没有正确触发 layout 更新，或者数据结构未及时同步，可能会出现空白占位。

---

解决方案建议

1. 确保节点折叠后触发布局刷新

   • 调用 graph.collapseElement(nodeId, { animation: true }) 后，应主动执行 graph.layout() 或 graph.render()，强制刷新布局。
   • 行为配置里建议使用 G6 内置的 collapse-expand，确保节点折叠/展开后自动重新布局。

   示例代码：

   graph.on('element:collapseexpand', async (e) => {
     // e.detail.id 为节点ID
     // e.detail.collapsed 为折叠状态
     if (e.detail.collapsed) {
       await graph.collapseElement(e.detail.id, { animation: true });
     } else {
       await graph.expandElement(e.detail.id, { animation: true });
     }
     // 关键：重新布局，收回空间
     await graph.layout();
   });

2. 确认布局配置正确

   • compact-box 布局会根据 children 数组自动调整空间。收起节点时，其 children 会被隐藏，不参与布局。
   • 保持 getWidth、getHeight、getHGap、getVGap 的配置为函数，便于动态调整节点和间距。

3. 数据结构同步

   • 折叠节点时，数据的 collapsed 属性需正确维护。
   • 推荐使用 G6 的 treeToGraphData 工具方法，每次更新后重新生成并赋值给图。

---

补充建议

• 版本兼容：请确保 G6 版本为 5.x 及以上，部分旧版本 collapse 行为有 bug。
• 性能优化：大量节点频繁折叠/展开建议开启动画或分批渲染，避免卡顿。
• 行为配置：如需自定义折叠行为，参考 官方文档 collapse-expand。

---

参考文档

• G6 树图布局文档
• 节点折叠展开行为

---

结论

请尝试在 collapse/expand 后手动调用 graph.layout()，或升级到 G6 最新版本并确保行为配置正确，通常可以解决收起节点后空间未收回的问题。

如仍有疑问，欢迎补充复现链接或最小 demo，我们会进一步定位！

---

G6 团队祝您开发顺利！

---

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

[kaisela]

此方式如果配合动画一起，会出现视觉效果偏差，很不友好

[kaisela]

是否可以在收起展开节点时一起把空间收回，不使用layout重新布局，这样看起来更为流畅，不会出现视觉断层