gpt4 book ai didi

javascript - 如何使用 vis.js 强制边缘方向?

转载 作者:行者123 更新时间:2023-12-04 17:35:55 25 4
gpt4 key购买 nike

我无法强制 vis 网络中的边缘进入一个方向。问题似乎是库更喜欢在层次结构中恰好 1 级长的边。

使用的布局代码:

layout: {
hierarchical: {
direction: "LR",
sortMethod: 'directed'
}
}

你可以在this JSFiddle中明白我的意思或下图。

我希望节点 1 与 2 和 3 在同一行,导致短箭头指向 4,长箭头指向 6。相反,它现在将 1 放在 4 之后,导致边缘指向左侧。

Example of the problem

最佳答案

请遵守以下代码。

您可以通过强制使用为每个节点定义的级别进行水平布局来实现这一点。

1 级:1、2、32级:43级:54级:6、75级:8

等等……

const container = document.getElementById("mynetwork");
const nodes = new vis.DataSet([
{
id: 1,
label: "1",
level: 1
},
{
id: 2,
label: "2",
level: 1
},
{
id: 3,
label: "3",
level: 1
},
{
id: 4,
label: "4",
level: 2
},
{
id: 5,
label: "5",
level: 3
},
{
id: 6,
label: "6",
level: 4
},
{
id: 7,
label: "7",
level: 4
},
{
id: 8,
label: "8",
level: 5
}
]);

const edges = new vis.DataSet([
{ from: 1, to: 4 },
{ from: 3, to: 4 },
{ from: 2, to: 4 },
{ from: 4, to: 5 },
{ from: 6, to: 8 },
{ from: 5, to: 7 },
{ from: 1, to: 6 },
{ from: 7, to: 8 }
]);
const data = {
nodes: nodes,
edges: edges
};
const options = {
nodes: {
font: {
size: 22
},
},
edges: {
font: {
align: "top"
},
arrows: {
to: { enabled: true, scaleFactor: 1, type: "arrow" }
}
},
layout: {
hierarchical: {
enabled: true,
levelSeparation: 200,
nodeSpacing: 70,
treeSpacing: 100,
blockShifting: true,
edgeMinimization: true,
parentCentralization: true,
direction: "LR", // UD, DU, LR, RL
sortMethod: "hubsize", // hubsize, directed
},
},
interaction: {
tooltipDelay: 200,
hover: true
},
};
const network = new vis.Network(container, data, options);
#mynetwork {
position: absolute;
top: 0px; right: 0px; bottom: 0px; left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"/>

<div id="mynetwork">

</div>

关于javascript - 如何使用 vis.js 强制边缘方向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56586628/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com