[Feat]: 想要一个嵌套的自环边，真实业务场景会更清晰一些

[pearlwang1106]

Describe the feature / 功能描述

想要图片效果的自环边

Are you willing to contribute? / 是否愿意参与贡献？

✅ Yes / 是

[github-actions]

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

感谢你的需求，我们很高兴你愿意参与贡献！

---

🎯 需求分析

你希望实现如图所示的嵌套自环边（一个节点上出现多个自环，且位置、样式可区分），以便更贴合真实业务场景。

---

🚀 实现建议

AntV G6 支持自环边（loop edge），也支持自环边的多样化配置。你可以通过edge.style属性灵活控制自环边的数量、位置、间距及样式。

1. 多自环边配置

通过为同一个节点添加多个 source === target 的 edge，并结合 loopPlacement 和 loopDist，即可实现多自环且互不重叠：

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [{ id: 'node1', style: { x: 100, y: 60 } }],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node1' },
      { id: 'edge2', source: 'node1', target: 'node1' },
      { id: 'edge3', source: 'node1', target: 'node1' }
    ]
  },
  edge: {
    style: {
      lineWidth: 2,
      endArrow: true,
      // 根据 edge id 设置不同位置和颜色
      loopPlacement: (datum) => {
        const placements = ['top', 'right', 'bottom'];
        return placements[parseInt(datum.id.slice(-1)) - 1];
      },
      loopDist: 25, // 控制自环距离
      stroke: (datum) => {
        const colors = ['#1890FF', '#52C41A', '#722ED1'];
        return colors[parseInt(datum.id.slice(-1)) - 1];
      }
    }
  }
});

graph.render();

效果： 每个自环边都在不同位置显示不同颜色，互不重叠，支持进一步嵌套和自定义。

---

2. 可选增强项

• 支持箭头（endArrow/startArrow）、标签（labelText）、交互状态（如 selected、hover 高亮等）。
• 你可以用函数动态控制样式参数，让业务数据驱动自环边展示。

---

🔗 官方文档参考

• 自环边配置说明
• 定制边样式示例

---

🛠️ 欢迎参与贡献！

如你愿意，你可以：

• 提交 PR 丰富自环边的官方示例
• 优化 loopPlacement 支持更多业务场景
• 提出 API/交互建议

如果需要进一步帮助或有具体业务需求，欢迎补充说明👍

---

G6 智能助手 敬上

---

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