gpt4 book ai didi

vis.js - vis.js中节点和分层布局之间的多行

转载 作者:行者123 更新时间:2023-12-04 07:33:14 26 4
gpt4 key购买 nike

我有一个 vis.js 网络图,其中包含节点之间的多条边,我也尝试使用分层布局对其进行设置。如果我做一个没有分层布局选项的普通图形,那么节点之间会显示多条线,但是,一旦我打开/放置分层布局选项,只绘制一条线。

下面是两个 plunkers 显示了我的意思:

https://plnkr.co/edit/c8SuBc0XjDZnn6im2vdg (关闭分层布局的Plunker)

var options = { 
height: '400px',
edges: { smooth: true, shadow: true},
layout: {
randomSeed: 1,
improvedLayout: true,
hierarchical: {
enabled: false, //change to true to see the other graph
direction: 'UD',
sortMethod: 'directed'
}
}
}

https://plnkr.co/edit/L22bHk6kh1XKXulTjESD (带有分层布局的Plunker)
var options = { 
height: '400px',
edges: { smooth: true, shadow: true},
layout: {
randomSeed: 1,
improvedLayout: true,
hierarchical: {
enabled: true, //change to true to see the other graph
direction: 'UD',
sortMethod: 'directed'
}
}
}

如您所见,在第二个中,从节点 1 到节点 3 的 2 条边在视觉上折叠为一条。任何帮助都会很棒。

最佳答案

我需要同样的东西,所以我搜索并找到了你的问题:)

似乎没有其他方法可以做到这一点,只能通过边缘属性,如下所示(请参阅下面的工作片段):

var edges = new vis.DataSet([
{from: 1, to: 3, arrows: 'to', label: "+++++", smooth: {type: "curvedCCW", roundness: 0.4}},
{from: 1, to: 3, arrows: 'to', label: "-----", smooth: {type: "curvedCCW", roundness: 0.2}},
{from: 1, to: 3, arrows: 'to', label: "11111", smooth: {type: "curvedCW", roundness: 0.2}},
{from: 1, to: 3, arrows: 'to', label: "22222", smooth: {type: "curvedCW", roundness: 0.4}},
]);

请分享您对这个问题的发现

// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', level: 0},
{id: 2, label: 'Node 2', level: 1},
{id: 3, label: 'Node 3', level: 1},
{id: 4, label: 'Node 4', level: 2},
{id: 5, label: 'Node 5', level: 2}
]);

// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3, arrows: 'to', label: "+++++", smooth: {type: "curvedCCW", roundness: 0.4}},
{from: 1, to: 3, arrows: 'to', label: "-----", smooth: {type: "curvedCCW", roundness: 0.2}},
{from: 1, to: 3, arrows: 'to', label: "11111", smooth: {type: "curvedCW", roundness: 0.2}},
{from: 1, to: 3, arrows: 'to', label: "22222", smooth: {type: "curvedCW", roundness: 0.4}},
{from: 1, to: 2, arrows: 'to'},
{from: 2, to: 4, arrows: 'to'},
{from: 2, to: 5},
{from: 3, to: 3}
]);

// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: {
hover:true,
tooltipDelay: 300
},
height: '400px',
edges: { smooth: true
},
layout: {
randomSeed: 1,
improvedLayout: true,
hierarchical: {
enabled: true, //change to true to see the other graph
direction: 'UD',
nodeSpacing: 150,
sortMethod: 'directed'
}
},
configure: {},
"physics": {
"enabled": false,
"minVelocity": 0.75
}
};
var network = new vis.Network(container, data, options);
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet" type="text/css">

<div id="mynetwork"><div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"><canvas width="600" height="400" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;"></canvas></div></div>

关于vis.js - vis.js中节点和分层布局之间的多行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43350345/

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