我想制作一个类似于下图的网络图。
Click on this link to view the image
我已经搜索了一下，但没有找到使用Cytoscape的解决方案。
Cytoscape.js是否可能具有双向边缘？
•
问答
chengnuo2020 回答：Cytoscape.js是否可能具有双向边缘？
是的，您可以在Cytoscape.js中创建双向边。首先，边缘的曲线样式应与“干草堆”（在下面将其设置为“直线”）不同，因为“干草堆”不支持边缘端点箭头。其次，您需要指定源和目标端点箭头形状。 here列出了箭头形状的可能值（我在下面使用了“ triangle-backcurve”）。如果需要一个方向性边缘，则只能为源或目标设置箭头形状。
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>