html js 怎么使用antv x6 selection

在AntV X6中，`selection`是一个用于处理节点选择的重要工具。HTML和JavaScript一起使用时，你可以按照以下步骤操作：

1. 首先，在HTML中引入AntV X6库和其他必要的模块：

<script src="https://unpkg.com/@antv/x6/dist/x6.min.js"></script>
<script src="https://unpkg.com/@antv/x6-plugin-selection@latest/dist/index.min.js"></script>

2. 创建一个新的X6画布并启用`SelectionPlugin`：

const graph = new x6.Graph({
  container: 'container', // HTML元素ID
  width: 800,
  height: 600,
  plugins: [x6.plugins.selection()]
});

3. 添加节点和边，并可以监听节点的选择事件：

graph.addNodes([...]); // 填充节点数据
graph.addEdge(...); // 填充边数据

// 监听节点选择事件
graph.on('node:selected', function (node) {
  console.log(`Node ${node.data.id} is selected.`);
});

// 可选：提供取消选择的方法
graph.on('node:deselected', function (node) {
  console.log(`Node ${node.data.id} is deselected.`);
});

4. 要手动选择节点，可以使用`selectNode`方法：

graph.selectNode(nodeId);