【发布时间】：2020-03-17 15:26:47
【问题描述】：
我已经为每个节点分配了级别。现在在每个级别上，我希望节点以与插入相同的顺序出现。这就是文档所说的。我见过很多发生这种情况的例子，与我的情况唯一不同的是：X 轴上也有边缘。
这是一个sn-p：
function main() {
var graph = {
nodes: new vis.DataSet([
{ "id": "M1", "label": "M1", "level": 0 },
{ "id": "R1", "label": "R1", "level": 0 },
{ "id": "W1", "label": "W1", "level": 0 },
{ "id": "C1R1", "label": "C1R1", "level": 1 },
{ "id": "C2R1", "label": "C2R1", "level": 1 },
{ "id": "R2R1", "label": "R2R1", "level": 1 },
{ "id": "W2R1", "label": "W2R1", "level": 1 },
{ "id": "C3R1", "label": "C3R1", "level": 1 }
]),
edges: new vis.DataSet([
{ "from": "M1", "to": "R1" },
{ "from": "W1", "to": "R1" },
{ "from": "M2", "to": "R2" },
{ "from": "W2", "to": "R2" },
{ "from": "R1", "to": "C1R1" },
{ "from": "R1", "to": "C2R1" },
{ "from": "C2R1", "to": "R2R1" },
{ "from": "W2R1", "to": "R2R1" },
{ "from": "R1", "to": "C3R1" }
])
};
var options = {
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color: {
border: 'lightgray',
background: 'white',
highlight: {
border: 'lightgray',
background: 'lightblue'
},
hover: {
border: 'lightgray',
background: 'lightblue'
}
}
},
edges: {
smooth: {
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 1
},
color: 'lightgray'
},
layout: {
hierarchical: {
direction: 'UD',
nodeSpacing: 150
}
},
interaction: {
dragNodes: true
},
physics: false,
edgeMinimization: false,
blockShifting: false
};
var network = new vis.Network(document.getElementById("network"), graph, options);
}#network {
width: 100%;
height: 180px;
}<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" />
</head>
<body onload="main();">
<div id="network"></div>
</body>主要的一点是：
var nodes = new vis.DataSet([
{"id": "M1", "label": "M1", "level": 0},
{"id": "R1", "label": "R1", "level": 0},
{"id": "W1", "label": "W1", "level": 0},
{"id": "C1R1", "label": "C1R1", "level": 1},
{"id": "C2R1", "label": "C2R1", "level": 1},
{"id": "R2R1", "label": "R2R1", "level": 1},
{"id": "W2R1", "label": "W2R1", "level": 1},
{"id": "C3R1", "label": "C3R1", "level": 1}
]);
这是一棵家谱，所以我希望丈夫、妻子和婚姻节点保持在一起。
这就是我得到的：
这就是我要找的：
基本上在 X 轴上，节点的显示顺序应与插入时的顺序相同（因此没有交叉或重叠）。
我尝试将边缘最小化设为假，将块移位设为假。甚至通过给 x 位置进行了尝试，但它仍会自行调整。
如果有没有办法，请告诉我。
【问题讨论】：
-
如果我禁用分层布局并保持 x 和 y 固定，那么它可以工作。它不与 x 轴上的边缘重叠。我想要的是保持分层布局，并且在每个级别上，以某种方式对节点和边进行排序（最好是按照插入）。
-
这实际上是 stackoverflow.com/q/46277945/3995261 的副本，但遗憾的是还没有答案
-
*几乎是重复的（这里建议采用某种方法以避免交叉/重叠）
标签： vis.js vis.js-network