[Feat]: 怎么加上连接桩，并通过拖拽连接桩实现创建边

[yrx100]

Describe the feature / 功能描述

https://g6.antv.antgroup.com/examples/behavior/create-edge/#by-drag
怎么加上连接桩，并通过拖拽连接桩实现创建边

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

Please select / 请选择

[github-actions]

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

您好，感谢您的提问！

要在 G6 中添加连接桩（port）并通过拖拽连接桩创建边，可以按照以下步骤实现：

---

1. 节点配置连接桩 (port)

G6 支持在节点上配置连接桩，连接桩就是用于连接边的锚点。可以在节点的 style 属性中设置 port: true 并定义 ports 数组：

node: {
  style: {
    port: true,
    ports: [
      { placement: 'left' },    // 左侧连接桩
      { placement: 'right' },   // 右侧连接桩
    ],
    // 其他样式...
  }
}

---

2. 启用边创建行为（create-edge）

在 behaviors 参数中添加 create-edge 行为。默认触发方式为拖拽，可以直接使用：

behaviors: [
  'drag-canvas',
  'drag-element',
  'create-edge', // 启用拖拽创建边
]

如需自定义触发方式（如点击），可配置 trigger：

{
  type: 'create-edge',
  trigger: 'drag', // 默认为拖拽
}

---

3. 示例代码

完整示例：

const graph = new Graph({
  container: 'container',
  width: 800,
  height: 600,
  data: {
    nodes: [
      { id: 'node1', style: { x: 200, y: 100, port: true, ports: [{ placement: 'left' }, { placement: 'right' }] } },
      { id: 'node2', style: { x: 400, y: 100, port: true, ports: [{ placement: 'left' }, { placement: 'right' }] } },
    ],
    edges: []
  },
  node: {
    style: { fill: '#7e3feb' }
  },
  edge: {
    style: { stroke: '#1890ff', lineWidth: 2 }
  },
  behaviors: [
    'drag-canvas',
    'drag-element',
    'create-edge'
  ]
});

---

4. 交互效果

• 节点上会显示连接桩（小圆点/锚点）。
• 用户可以拖拽连接桩，在另一节点的连接桩上释放鼠标，即可创建边。

如需更多自定义（如连接桩样式、边样式、回调函数等），可参考G6 官方文档：连接桩与创建边。

---

参考文档

• 连接桩与创建边示例
• G6 create-edge 行为文档

---

如有更多需求或遇到问题，欢迎进一步交流！

---

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

[yvonneyx]

1. 在节点上配置连接桩：https://g6.antv.antgroup.com/manual/element/node/base-node#%E8%BF%9E%E6%8E%A5%E6%A1%A9%E6%A0%B7%E5%BC%8F
2. 创建边交互上可以通过配置 enable，只在用户点击到连接桩时激活交互
3. 实际创建一条边是新增一条边，通过 sourcePort、targetPort 指定。