vis.js如何在每个级别上更改节点的顺序

Question

所以我正在研究一个相当简单的树。左右两个子组是相关的。这就是我要的：

但是我得到类似

我曾考虑过创建两个网络，但我认为这不会允许我在两个网络之间绘制箭头。我也不认为我们可以对每个节点应用两个组/层次结构。群集似乎也没有实现我想要的功能，因为它将所有节点包装在一起成为一个节点。任何见识将不胜感激。谢谢！

var nodes = new vis.DataSet([
      {id: 1, label: 'dca1a', group: 'dcaReg'},
      {id: 2, label: 'dca1c', group: 'dcaReg'},
      {id: 3, label: 'dca1-lossless', group: 'dcaReg'},
      {id: 4, label: 'dca1-agg1', group: 'dcaAgg'},
      {id: 5, label: 'phx2a', group: 'phxReg'},
      {id: 6, label: 'phx2-lossless', group: 'phxReg'},
      {id: 7, label: 'phx2c', group: 'phxReg'},
      {id: 8, label: 'phx2-agg1', group: 'phxAgg'},
    ]);

var edges = new vis.DataSet([
      {from: 1, to: 4},
      {from: 1, to: 8},
      {from: 1, to: 7},
      {from: 5, to: 3},
      {from: 5, to: 4},
      {from: 5, to: 8},
    ]);

    var options = {
      groups: {
        dca: {borderWidth: 1},
        phx: {borderWidth: 1},
        dcaReg: {color: {background: 'red'}, borderWidth: 1, level: 0},
        dcaAgg: {color: {background: 'blue'}, borderWidth: 1, level: 1},
        phxReg: {color: {background: 'yellow'}, borderWidth: 1, level: 0},
        phxAgg: {color: {background: 'green'}, borderWidth: 1, level: 1},
      },
      layout: {
        improvedLayout: true,
        hierarchical: {
          direction: 'UD',
        },
      },
      physics: {
        enabled: false,
      },
      edges: {
        smooth: {
          type: 'curvedCW',
          forceDirection: 'none',
          roundness: 0.1, // This is max roundness
        },
      }
    };