我希望创建一个这样的节点：期望结果
我尝试将Cytoscape.js与一个复合节点和两个子节点一起使用，但我得到了：实际结果
这是我的代码：
{ data: { id: 'a', parent: 'c', label: 'in:{$in}' }, classes: 'top-left' },
{ data: { id: 'b', parent: 'c', label: 'out:{$out}' }, classes: 'top-right' },
{ data: { id: 'c', label: 'ip: {$ip}' }, classes: 'bottom-center' },
有可能用Cytoscape.js得到结果吗？
提前谢谢。
Norman
这似乎是一个布局问题，只需对复合节点使用此配置(请参阅此处(：
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: ':parent',
css: {
'text-valign': 'top',
'text-halign': 'center',
}
},
{
selector: 'edge',
css: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
}
],
elements: {
nodes: [{
data: {
id: 'a',
parent: 'b'
}
},
{
data: {
id: 'b'
}
},
{
data: {
id: 'c',
parent: 'b'
}
},
{
data: {
id: 'd'
}
},
{
data: {
id: 'e'
}
},
{
data: {
id: 'f',
parent: 'e'
}
}
],
edges: [{
data: {
id: 'ad',
source: 'a',
target: 'd'
}
},
{
data: {
id: 'eb',
source: 'e',
target: 'b'
}
}
]
},
layout: {
name: 'grid',
columns: 2
}
});body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}<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">
<title>Compound nodes</title>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>