[Bug]: 在使用 antv-degre 时，往 combo 节点上添加边，会抛出异常：Cannot add edge ${edge.id}: source ${edge.source} or target ${edge.target} does not exist

[wangpengfeido]

Describe the bug / 问题描述

目测是因为这里的问题 https://github.com/antvis/layout/blob/v5/src/algorithm/antv-dagre/graph.ts#L166

在布局 addEdge 时的检查中，this.nodes 并没有包含 combo 节点。

Reproduction link / 复现链接

No response

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

1. 使用 antv-dagre 布局创建 graph
2. 调用 graph.addData() ，这是第一次添加数据，数据中包含 combo、node、edge，不会报错。
3. 调用 graph.addEdgeData()，这一步添加连接在 combo 上的边。
4. 调用 graph.render() ，抛出上述异常。

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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

[github-actions]

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

👋 感谢反馈！

您的问题描述非常详尽。下面针对在使用 antv-dagre 布局时，combo 节点添加边导致 "source or target does not exist" 异常做出专业回复：

---

⚡ 问题分析

• 异常原因：
  antv-dagre 在处理边时，会校验 source/target 节点是否真实存在于 this.nodes。当前 combo 节点并未被视为实际节点记录，从而导致校验失败（即 combo 节点未被纳入 nodes 集合）。

• 复现流程：

  1. graph.addData() 添加包含 combo、node、edge 的数据，正常。
  2. graph.addEdgeData() 添加连接 combo 的边。
  3. graph.render() 时，抛出异常。

---

🛠 解决建议

1. Combo 节点不能直接作为边的端点

根据 G6 数据结构与 antv-dagre 的布局逻辑，combo 是节点集合的“容器”，而非节点本身。

• 边的 source/target 应为 node 的 id，而非 combo 的 id。
• 若需表现 combo 与其他节点的关联，可以通过增加虚拟节点（代表 combo），或者将边连接到 combo 内的某个实际 node。

2. 正确的 graph 数据示例

{
  nodes: [
    { id: 'node1', combo: 'comboA' },
    { id: 'node2', combo: 'comboA' },
    // 其他节点
  ],
  combos: [
    { id: 'comboA' }
  ],
  edges: [
    { source: 'node1', target: 'node2' }, // 只能连接 node
    // { source: 'comboA', target: 'node2' } // ❌ 不支持，combo 不能作为端点
  ]
}

3. 如确需“combo与节点”关联

• 可以在 combos 中增加一个“虚拟节点”作为 combo 的代表，然后将边指向该节点。
• 或者通过自定义渲染、插件实现 combo 的特殊关联展示。

---

💡 最佳实践与错误处理

• 数据校验：在添加边前，确保 source/target 都是 nodes 中的 id。
• 错误提示：如不支持 combo 作为端点，建议在前端做数据校验，并给出友好提示。
• undo/历史回滚：如误操作导致异常，可利用 history.undo() 撤销。

---

📝 总结

• antv-dagre 及 G6 当前架构下，combo 仅作为节点的容器，不可直接作为边的端点。
• 请调整数据结构，确保所有边的端点均为 nodes 中存在的节点 id。
• 若有特殊需求，建议通过虚拟节点或自定义扩展实现。

---

如需进一步讨论 combo 的边关联方案或示例代码，欢迎补充问题。

---

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

[github-actions]

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

👋 感谢反馈！关于往 combo 节点添加边时出现异常

您好，感谢详细描述问题和提供复现步骤。您的 issue 涉及 antv-dagre 布局与 G6 combo 节点的兼容性，具体异常如下：

Cannot add edge ${edge.id}: source ${edge.source} or target ${edge.target} does not exist

---

📌 问题分析

1. G6 数据结构

   • G6 的 combo 是“节点分组”，本质上并不是 graph 的 node，只是用于视觉/结构分组。
   • antv-dagre 布局期望边的 source/target 是 node id，而不是 combo id。
   • 在 addEdge 检查时，combo id 不在 this.nodes，因此抛出异常。

2. 边连接到 combo

   • 官方推荐边连接节点，而不是直接连接 combo（combo 不是合法边端点）。
   • 只有在 combo 配置 ports 时，才可视化地允许边连接到 combo，但底层实现仍是节点端点。

---

✅ 推荐处理方式

1. 边连接到节点，不直接连接 combo

• 请确保 edge 的 source/target 指向实际 node id。
• 如果需要表现“combo之间有联系”，可以让 combo 内的某个 node 作为连线端点。

2. 若必须表现 combo 间关系

• 可在 combo 内添加虚拟节点（如 port/anchor node），让边连接该节点。
• 或者配置 combo ports，需额外设置 combo port id，并用 port id 作为边端点。

3. 数据处理建议

• 添加 combo、node、edge 时，先完整添加 node，再添加 edge，最后处理 combo。
• 若使用 antv-dagre 布局，combo 相关数据需预处理，确保所有 edge 的端点是 node。

---

🚩 示例代码

// 边连接节点，而不是 combo
graph.addEdgeData([
  { id: 'edge1', source: 'nodeA', target: 'nodeB' }
]);

// 若需要 combo 间连线（建议节点作为端点）
graph.addEdgeData([
  { id: 'edge2', source: 'nodeA_in_combo1', target: 'nodeB_in_combo2' }
]);

---

📝 参考官方文档

• G6 combo 文档
• antv-dagre 示例
• G6 边数据结构

---

⚡ 总结

• antv-dagre 不支持 combo 作边端点，需用节点 id。
• 若要 combo 间连线，建议用虚拟节点或 combo ports。
• 请调整 edge 数据，确保 source/target 是 node id。

如需进一步帮助（如 combo ports 配置、虚拟节点方案），欢迎补充说明需求！

---

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

[wangpengfeido]

AI 的建议是不合理的。combo 本来就可以连接节点，如果按 AI 的建议，只有使用 antv-degre 布局时需要做一些特殊处理，这明显不合理。