[Feat]: 选中一个id为1的元素时，我想同时也选中id为2的元素

[xiaozhuzhr]

Describe the feature / 功能描述

我希望选中一个id为1的元素时，id为2的元素也同时被选中

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

✅ Yes / 是

[github-actions[bot]]

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

你好，感谢你的功能建议和愿意贡献！

需求分析

你希望在选中 id 为 1 的元素时，id 为 2 的元素也自动被选中。这属于「联动选中」的业务需求，G6 官方实现通常是点击选中单个节点，但可以通过自定义交互或业务状态来实现你的目标。

推荐实现方式

1. 监听节点点击事件并联动设置状态

你可以通过监听 node:click 事件，在选中 id 为 1 的节点时，使用 graph.setElementState 或 graph.updateNodeData 同时设置 id 为 2 的节点为选中状态。

示例代码

// 假设你的节点 id 分别为 '1' 和 '2'
graph.on('node:click', (evt) => {
  const nodeId = evt.target.id;
  if (nodeId === '1') {
    // 设置 id=1 和 id=2 节点为选中状态
    graph.setElementState('1', ['selected']);
    graph.setElementState('2', ['selected']);
  } else {
    // 其他节点正常选中逻辑
    graph.setElementState(nodeId, ['selected']);
  }
});

2. 自定义业务状态（适用于 React/Vue 节点）

如果你用的是自定义 React 或 Vue 节点，可以通过修改节点数据中的 selected 字段，实现联动选中，并触发重新渲染：

graph.updateNodeData([
  { id: '1', data: { selected: true } },
  { id: '2', data: { selected: true } }
]);
graph.render();

3. 多选行为（官方多选）

G6 的内置 click-select 行为支持多选（如按 Shift），但不直接支持业务联动。如果需要自动多选，建议结合上述事件监听做业务扩展。

📝 注意事项

• 请确保节点 id 一致（字符串和数字需对应）。
• 如有自定义选中样式，请在 node.state.selected 中配置。
• 若用多选行为，需保证业务逻辑不会与官方行为冲突。

参考文档

• 节点状态样式配置
• 自定义节点选中交互
• React/Vue 节点业务状态管理

---

如需详细代码或有更多交互需求，欢迎补充说明！

---

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

[xiaozhuzhr]

选中后如何取消选中，或者在点击其他元素或者画布时，取消选中

[Aarebecca]

@xiaozhuzhr 可以参考这个实现：https://g6.antv.antgroup.com/api/event#%E7%A4%BA%E4%BE%8B