grouping - 在 Cytoscape.js 中将节点分组在一起
问题描述
我正在使用Cytoscape进行网络可视化。
我发现了这个可以扩展和收缩的分组节点示例。
我的问题是,是否可以突出显示节点,然后动态地将它们添加/删除到一个组中?
我还没有在网上找到一个实际尝试这个的例子,而且我发现的所有例子都像前面提到的那样已经在初始数据加载中预定义了组。
解决方案
您可以使用 cytoscape 的拖放扩展。
此外,还有剪贴板扩展,您可以在其中通过 ctrl + mousedrag 选择多个元素。
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'label': 'data(id)'
}
},
{
selector: 'node:parent',
style: {
'label': ''
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
},
{
selector: '.cdnd-grabbed-node',
style: {
'background-color': 'red'
}
},
{
selector: '.cdnd-drop-sibling',
style: {
'background-color': 'red'
}
},
{
selector: '.cdnd-drop-target',
style: {
'border-color': 'red',
'border-style': 'dashed'
}
}
],
elements: {
nodes: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
},
{
data: {
id: 'c'
}
},
{
data: {
id: 'd',
parent: 'p'
}
},
{
data: {
id: 'p'
}
}
],
edges: [
]
}
});
var cdnd = cy.compoundDragAndDrop();
var removeEmptyParents = false;
var isParentOfOneChild = function(node) {
return node.isParent() && node.children().length === 1;
};
var removeParent = function(parent) {
parent.children().move({
parent: null
});
parent.remove();
};
var removeParentsOfOneChild = function() {
cy.nodes().filter(isParentOfOneChild).forEach(removeParent);
};
// custom handler to remove parents with only 1 child on drop
cy.on('cdndout', function(event, dropTarget) {
if (removeEmptyParents && isParentOfOneChild(dropTarget)) {
removeParent(dropTarget);
}
});
// custom handler to remove parents with only 1 child (on remove of drop target or drop sibling)
cy.on('remove', function(event) {
if (removeEmptyParents) {
removeParentsOfOneChild();
}
});
// toggle check handler
document.getElementById('remove-1ch-parents').addEventListener('click', function() {
removeEmptyParents = !removeEmptyParents;
if (removeEmptyParents) {
removeParentsOfOneChild();
}
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
#options {
z-index: 2;
position: absolute;
right: 0;
top: 0;
margin: 0.5em;
}
<head>
<title>cytoscape-compound-drag-and-drop demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-compound-drag-and-drop@1.0.0/cytoscape-compound-drag-and-drop.min.js"></script>
</head>
<body>
<h1>cytoscape-compound-drag-and-drop</h1>
<div id="cy"></div>
<div id="options">
<input id="remove-1ch-parents" type="checkbox" value="false" />
<label for="remove-1ch-parents">Remove parents with only one child</label>
</div>
</body>
问题本身并不是那么明确的要求,所以如果仍有不清楚的地方,请编辑它以更精确(也许你的代码,以便我们可以将其用作基础。THX
推荐阅读
- c++ - 错误 MSB3073: :VCEnd" 以代码 255 退出
- python - PC 将 Python 固定到任务栏而不是 Anaconda Navigator
- selenium - 无法在剑道网格上执行点击
- c# - 如何解决“错误 MSB3188:程序集 ... 必须经过强签名才能被标记为先决条件。”
- highcharts - Highchart 热图删除图例切换上的空行
- python - 无法使用烧瓶服务器在 IIS 上运行破折号应用程序
- android - 如何在 CircleAvatar 上放置指向菜单的链接?有可能吗?
- python-3.x - 如何以反转形式打印二进制数?
- c# - 时间:2019-05-10 标签:c#mapprinterwithcmd
- jenkins - 如何在Jenkins-groovy脚本中传递声明为`def`的变量