Cytoscape.js是否可能具有双向边缘？ [英] Is is possible to have a bidirectional edge in Cytoscape.js?
问题描述
我想制作一个类似于下图的网络图。
I want to make a network graph that looks similar to this below image.
我已搜索并没有找到解决方案
I have searched across and have not found a solution for this using Cytoscape.
推荐答案
是的，您可以在Cytoscape.js中创建双向边。首先，边缘的曲线样式应与干草堆（在下面将其设置为直线）不同，因为干草堆不支持边缘端点箭头。其次，您需要指定源和目标端点箭头形状。 此处（我在下面使用了 triangle-backcurve ）。如果需要一个方向性边缘，则只能为源或目标设置箭头形状。
Yes, you can create bidirectional edges in Cytoscape.js. First, the curve-styles of your edges should be different than 'haystack' (below I set it as 'straight'), because 'haystack' doesn't support edge endpoint arrows. Second, you need to specify source and target endpoint arrow shapes. Possible values for arrow shapes are listed here (I used 'triangle-backcurve' below). If you want one directional edge, you can set the arrow shape only for source or target.
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: 'edge',
css: {
'curve-style': 'straight',
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
}
],
edges: [{
data: {
id: 'n0n1',
source: 'n0',
target: 'n1'
}
},
{
data: {
id: 'n1n2',
source: 'n1',
target: 'n2'
}
},
{
data: {
id: 'n2n3',
source: 'n2',
target: 'n3'
}
}
]
}
});
cy.getElementById('n0n1').style({'source-arrow-shape': 'triangle-backcurve', 'target-arrow-shape': 'triangle-backcurve'});
cy.getElementById('n1n2').style({'target-arrow-shape': 'triangle-backcurve'});
cy.getElementById('n2n3').style({'source-arrow-shape': 'triangle-backcurve'});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 95%;
width: 95%;
left: 0;
top: 0;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape@3.10.0/dist/cytoscape.min.js">
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
这篇关于Cytoscape.js是否可能具有双向边缘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
