Vis.js层级布局：同层级节点未按插入顺序显示问题

我太懂这种踩坑的感觉了！你已经给节点设置了level属性，本来应该按照插入顺序排列，但因为同层级存在横向（X轴方向）的边，Vis.js的布局算法自动调整了节点位置，直接打乱了你预期的顺序——这其实是层级布局默认的边优化逻辑在“搞事情”。

核心原因 #

Vis.js的层级布局默认开启了edgeMinimization（边最小化）功能，当同层级节点之间有连接时，算法会自动重新排序节点，尽可能减少边的交叉和长度，这就会覆盖你期望的插入顺序优先级。

两种实用解决方案 #

方案1：关闭边最小化优化

直接在布局配置里关闭边优化，让算法不再调整同层级节点的顺序，这是最快捷的方法：

var options = {
  layout: {
    hierarchical: {
      enabled: true,
      levelSeparation: 150, // 可根据你的视觉需求调整
      nodeSpacing: 100,
      edgeMinimization: false, // 关键：关闭边优化逻辑
      sortMethod: 'directed', // 保持默认方向排序，但此时会优先遵循插入顺序
      direction: 'UD' // 你的布局方向，比如上下排列，可按需改为LR（左右）等
    }
  }
};

方案2：手动指定节点顺序（更稳妥）

如果关闭边优化后仍有偏差，可以给每个同层级节点添加order属性，用数值强制指定排列顺序（数值越小越靠前，具体位置取决于你的布局方向设置）：

var graph = {
  nodes: new vis.DataSet([
    { "id": "M1", "label": "M1", "level": 0, "order": 1 },
    { "id": "R1", "label": "R1", "level": 0, "order": 2 },
    { "id": "W1", "label": "W1", "level": 0, "order": 3 },
    { "id": "C1R1", "label": "C1R1", "level": 1, "order": 1 },
    // 其他节点按插入顺序依次设置order值即可
  ]),
  // 你的边配置内容...
};

建议搭配方案1的edgeMinimization: false一起使用，效果会更稳定。

测试小技巧 #

先尝试方案1，大部分场景下关闭边优化就能解决问题；如果布局还是不符合预期，再加上order属性手动控制，基本就能让同层级节点严格按你想要的顺序排列了。

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