Vis JS Edge：点击边时如何显示两端设备的端口标签

我之前做网络拓扑可视化的时候刚好遇到过这个需求，给你分享个亲测可行的解决方案，核心就是利用VisJS的事件监听和动态更新边标签的能力来实现：

• 准备带端口信息的链路数据
  在定义每条edge的时候，给它加上自定义的端口属性，比如portFrom（源设备端口）和portTo（目标设备端口），初始标签留空：

  // 初始化节点数据（示例）
  const nodes = new vis.DataSet([
    { id: 'router1', label: 'Router 1' },
    { id: 'switch1', label: 'Switch 1' }
  ]);
  
  // 初始化链路数据，包含端口信息
  const edges = new vis.DataSet([
    { id: 1, from: 'router1', to: 'switch1', portFrom: '8', portTo: '15', label: '' },
    // 其他链路可以按同样格式添加
  ]);
  

• 监听链路点击事件，动态更新标签
  给VisJS的network实例绑定click事件，当用户点击链路时，更新这条链路的label为你想要的端口显示格式：

  // 创建network实例（示例）
  const container = document.getElementById('network-container');
  const data = { nodes: nodes, edges: edges };
  const network = new vis.Network(container, data, {});
  
  // 监听点击事件
  network.on('click', function(params) {
    // 先清空所有链路的标签，确保每次只显示当前点击的链路端口
    edges.forEach(edge => {
      edges.update({ id: edge.id, label: '' });
    });
  
    // 判断是否点击了链路
    if (params.edges.length > 0) {
      const clickedEdgeId = params.edges[0];
      const targetEdge = edges.get(clickedEdgeId);
      // 拼接成你需要的端口显示格式
      const portLabel = `[${targetEdge.portFrom}] ---------------- [${targetEdge.portTo}]`;
      // 更新这条链路的标签
      edges.update({ id: clickedEdgeId, label: portLabel });
    }
  });
  

• 优化标签显示样式（可选）
  可以通过配置options来调整标签的外观，让它更清晰易读：

  const options = {
    edges: {
      label: {
        fontSize: 12,
        align: 'middle',
        // 给标签加白色背景，避免和链路线条重叠
        background: {
          color: '#ffffff',
          padding: 4,
          cornerRadius: 2
        }
      },
      width: 2,
      color: { inherit: 'both' }
    }
  };
  
  // 重新初始化network时传入options
  const network = new vis.Network(container, data, options);
  

• 额外优化：点击空白处隐藏端口标签（可选）
  如果希望点击拓扑图空白区域时清空所有端口标签，可以在点击事件里补充判断：

  network.on('click', function(params) {
    // 点击空白处（未选中节点或链路）
    if (params.nodes.length === 0 && params.edges.length === 0) {
      edges.forEach(edge => {
        edges.update({ id: edge.id, label: '' });
      });
      return;
    }
  
    // 下面是之前的点击链路逻辑...
  });
  

这个方案的优势是逻辑简单，完全基于VisJS原生API实现，不需要额外依赖，而且可以灵活调整显示格式和样式。

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