没问题，我来给你一步步讲怎么在vis.js Network里实现选中节点的复制，包括节点本身和关联的边～

核心思路 #

要完成这个需求，我们需要分三步走：获取选中节点、复制节点并修改标识、复制关联边并适配新节点，最后把新节点和边加入数据集。下面是完整的可落地代码，我会逐段解释细节：

1. 基础初始化（假设你已经完成这部分） #

先确认你的网络实例、节点和边数据集已经创建，比如：

// 初始化节点数据集（包含你提到的B、D、E）
const nodes = new vis.DataSet([
  { id: 'B', label: 'B' },
  { id: 'D', label: 'D' },
  { id: 'E', label: 'E' },
  // 其他节点...
]);

// 初始化边数据集（包含原节点的关联边）
const edges = new vis.DataSet([
  { from: 'B', to: 'D', id: 'B-D' },
  { from: 'D', to: 'E', id: 'D-E' },
  // 其他边...
]);

// 创建网络实例
const container = document.getElementById('network');
const network = new vis.Network(container, { nodes, edges }, {});

2. 编写复制核心函数 #

这个函数会处理选中节点的复制逻辑，包括节点和关联边：

function copySelectedNodes() {
  // 获取当前选中的节点ID数组
  const selectedIds = network.getSelectedNodes();
  if (selectedIds.length === 0) {
    alert('请先选中要复制的节点哦');
    return;
  }

  // 第一步：复制选中节点，生成B'、D'、E'
  const newNodes = selectedIds.map(nodeId => {
    const originalNode = nodes.get(nodeId);
    return {
      ...originalNode,
      id: `${nodeId}'`, // 给ID加撇号保证唯一性
      label: `${originalNode.label}'`, // 标签同步修改
      color: '#ff9800' // 可选：用不同颜色区分副本，方便识别
    };
  });

  // 第二步：复制关联边，适配新节点ID
  const newEdges = [];
  selectedIds.forEach(nodeId => {
    // 筛选出所有和当前节点相关的边（作为起点或终点）
    const relatedEdges = edges.get({
      filter: edge => edge.from === nodeId || edge.to === nodeId
    });

    // 复制每条边，替换原节点ID为新节点ID
    relatedEdges.forEach(edge => {
      const newEdge = { ...edge };
      if (newEdge.from === nodeId) newEdge.from = `${nodeId}'`;
      if (newEdge.to === nodeId) newEdge.to = `${nodeId}'`;
      newEdge.id = `${edge.id}_copy`; // 给新边设置唯一ID
      newEdges.push(newEdge);
    });
  });

  // 第三步：把新节点和新边加入数据集，网络会自动更新
  nodes.add(newNodes);
  edges.add(newEdges);
}

3. 触发复制操作 #

你可以给按钮绑定这个函数，或者用键盘快捷键触发：

// 示例1：绑定按钮点击
document.getElementById('copy-btn').addEventListener('click', copySelectedNodes);

// 示例2：绑定Ctrl+C快捷键
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'c') {
    e.preventDefault(); // 避免默认复制行为
    copySelectedNodes();
  }
});

关键细节提醒 #

• ID唯一性：vis.js要求节点和边的ID必须唯一，所以我们用加撇号、加后缀的方式保证新元素ID不重复
• 边的完整性：复制节点时一定要同步复制关联边，这样副本节点的连接关系才会和原节点一致
• 自定义扩展：你可以在复制节点时修改大小、形状等属性，让副本和原节点更易区分

执行后，你选中的B、D、E就会被复制成B'、D'、E'，并且它们之间的边也会同步复制到新节点上啦～

内容的提问来源于stack exchange，提问作者Sanjay Nishad