gpt4 book ai didi

javascript - 如何在 cytoscape.js 中显示子节点的同时隐藏复合节点

转载 作者:行者123 更新时间:2023-11-30 06:16:42 25 4
gpt4 key购买 nike

我想创建一个图表,其中一些节点是“复合”节点,嵌入几个子节点,但不显示它们:应显示子节点但应隐藏复合节点。

作为布局,我使用了一个名为 dagre-cytoscape 的 cytoscape.js 扩展。 .

到目前为止,我创建了一个只有复合节点具有的“复合”类,并且我尝试设置不透明度:0 或可见性:仅为此类设置隐藏,但这些选项中的每一个子节点也变得不可见。

这是一个非工作示例的 bin:

<!DOCTYPE html>

<html>

<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

<title>dagre demo</title>

<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cytoscape.org/cytoscape.js-dagre/cytoscape-dagre.js"></script>

<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 75%;
height: 100%;
position: absolute;
left: 200;
top: 200;
z-index: 999;
}
</style>

<script>
window.addEventListener('DOMContentLoaded', function () {

var cy = window.cy = cytoscape({
container: document.getElementById('cy'),

layout: {
name: 'dagre'
},

style: [{
selector: 'node',
style: {
'background-color': 'teal',
'label': 'data(id)',
'visibility': 'visible'
}
},
{
selector: '.compound',
style: {
'visibility': 'hidden'
}
}
],

elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1',
parent: 'parent'
}
},
{
data: {
id: 'n2',
parent: 'parent'
}
},
{
data: {
id: 'parent'
},
classes: 'compound'
}
],
edges: [{
data: {
source: 'n0',
target: 'n1'
}
},
{
data: {
source: 'n0',
target: 'n2'
}
}
]
}
});
});
</script>
</head>

<body>
<h1>cytoscape-dagre test</h1>
<div id="cy"></div>

</body>

</html>

jsbin version

在此示例中,隐藏了节点 n1 和 n2,以及父节点。我想隐藏父级,但让 n1 和 n2 可见。

最佳答案

尝试将复合节点的 background-opacityborder-width 设置为 0。

关于javascript - 如何在 cytoscape.js 中显示子节点的同时隐藏复合节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55709309/

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