如何在vis-network中通过标签定义边并转换为ID格式？

vis-network允许通过包含ID的节点DataSet定义网络，而“边”由ID列表构成。示例代码如下：

// 创建节点数组
var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" },
]);

// 创建边数组
var edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 },
]);

// 创建网络
var container = document.getElementById("mynetwork");
var data = {
  nodes: nodes,
  edges: edges,
};
var options = {};
var network = new vis.Network(container, data, options);

节点和边数量较少时该方式可行，但数量增多后，边列表管理会变得困难。

现希望定义“edgesAsLabel”结构（用节点标签定义边），再通过JavaScript转换函数将其转为ID格式的边列表，预期代码如下：

// 创建用标签引用的边数组
var edgesAsLabels = new vis.DataSet([
  { from: "Node 1", to: "Node 3" },
  { from: "Node 1", to: "Node 2" },
  { from: "Node 2", to: "Node 4" },
  { from: "Node 2", to: "Node 5" },
  { from: "Node 3", to: "Node 3" },
]);

// 创建网络
var container = document.getElementById("mynetwork");
var edges = someJsTransposeMagic(edgesAsLabels);
var data = {
  nodes: nodes,
  edges: edges,
};

请问该“someJsTransposeMagic()”转换函数应如何实现？

实现思路 #

核心是先建立标签到ID的映射表，避免每次查找都遍历节点列表以提升效率，之后遍历标签格式的边列表，用映射表替换from和to字段的值，最后将转换结果包装为vis.DataSet返回。

代码实现 #

function someJsTransposeMagic(edgesAsLabels, nodes) {
  // 构建标签到ID的映射对象
  const labelToId = {};
  nodes.forEach(node => {
    labelToId[node.label] = node.id;
  });

  // 转换每条边的标签为ID，同时保留边的其他属性
  const convertedEdges = edgesAsLabels.map(edge => ({
    from: labelToId[edge.from],
    to: labelToId[edge.to],
    ...edge
  }));

  // 返回vis.DataSet格式的边列表
  return new vis.DataSet(convertedEdges);
}

使用说明 #

调用时需传入标签格式的边数据集和节点数据集：

var edges = someJsTransposeMagic(edgesAsLabels, nodes);

额外优化 #

• 处理重复标签：避免后续节点ID覆盖之前的映射，可添加警告提示

nodes.forEach(node => {
  if (labelToId[node.label]) {
    console.warn(`重复节点标签：${node.label}，ID ${node.id} 将覆盖原ID ${labelToId[node.label]}`);
  }
  labelToId[node.label] = node.id;
});

• 处理不存在的标签：对未匹配到的标签添加错误提示，避免无效边

const convertedEdges = edgesAsLabels.map(edge => {
  const fromId = labelToId[edge.from];
  const toId = labelToId[edge.to];
  
  if (!fromId) console.error(`未找到标签为 ${edge.from} 的节点`);
  if (!toId) console.error(`未找到标签为 ${edge.to} 的节点`);

  return {
    from: fromId,
    to: toId,
    ...edge
  };
});

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