Vue.js集成Vis.js Network节点间多连接线条不显示问题求助

我之前也碰到过一模一样的问题！Vis.js在默认配置下，如果关闭了物理引擎且禁用了平滑边，同方向的多条边会直接重叠在一起，看起来就像只有一条。下面给你两个可行的解决方案：

方案一：启用物理引擎自动布局 #

物理引擎会帮你计算每条边的最优位置，自动把同方向的边分开排列。你只需要修改physics配置：

mapOption:{
  nodes: {
    color: "black",
    shadow: { enabled: true },
    font: { face: "Source Han Serif CN", color: "black" },
  },
  edges: {
    arrows: {
      from: {enabled: false , type:'circle'},
      to: {enabled: false , type:'circle'},
      middle: {enabled: true , type:'circle'},
    },
    smooth: { enabled: false},
    width: 1.5,
    color: { color: 'black', highlight: 'black' },
  },
  physics: { 
    enabled: true,
    // 可选：调整参数让布局更稳定，适配你的需求
    stabilization: { iterations: 200 },
    barnesHut: { gravitationalConstant: -80000, springLength: 200 }
  },
  interaction: {
    hover: true,
    dragNodes:true,
    dragView: true,
    hoverConnectedEdges: true,
    selectable: true,
    selectConnectedEdges: true,
  },
  manipulation: { enabled: false },
}

方案二：保持物理引擎关闭，启用平滑边并强制方向 #

如果不想启用物理引擎，也可以通过开启平滑边并设置强制方向，让多条边平行分开显示：

mapOption:{
  nodes: {
    color: "black",
    shadow: { enabled: true },
    font: { face: "Source Han Serif CN", color: "black" },
  },
  edges: {
    arrows: {
      from: {enabled: false , type:'circle'},
      to: {enabled: false , type:'circle'},
      middle: {enabled: true , type:'circle'},
    },
    smooth: { 
      enabled: true,
      forceDirection: "horizontal" // 可选"vertical"，控制边的排列方向
    },
    width: 1.5,
    color: { color: 'black', highlight: 'black' },
    distance: 40 // 可选：设置边之间的间距，数值越大间距越宽
  },
  physics: { enabled: false },
  interaction: {
    hover: true,
    dragNodes:true,
    dragView: true,
    hoverConnectedEdges: true,
    selectable: true,
    selectConnectedEdges: true,
  },
  manipulation: { enabled: false },
}

额外建议：给每条边添加唯一ID #

虽然不是必须，但给每条边分配唯一的id能让Vis.js更好地识别和管理不同的边，避免潜在的冲突：

var edges = new vis.DataSet([
  {id: 'edge1', from: 1, to: 2, label: "1gb bandwith"},
  {id: 'edge2', from: 1, to: 2, label: "10gb betwith"},
  {id: 'edge3', from: 2, to: 1, label: "down"},
  {id: 'edge4', from: 2, to: 1, label: "up"},
]);

这两种方案都能让你看到所有的边，你可以根据自己的需求选择其中一种试试！

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