最佳答案
是的，您可以在 Cytoscape.js 中创建双向边。首先，边缘的曲线样式应该与“haystack”不同(下面我将其设置为“straight”)，因为“haystack”不支持边缘端点箭头。其次，您需要指定源端点和目标端点箭头形状。列出了箭头形状的可能值 here (我在下面使用了“三 Angular 形后曲线”)。如果您需要一个方向边，则可以仅为源或目标设置箭头形状。
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e4fef3e8f4e4e6f7e2c7b4a9b6b7a9b7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/cytoscape.min.js">
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>关于javascript - Cytoscape.js 中是否可以有双向边缘？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58870717/