javascript - cytoscape js隐藏新布局不包含的元素
问题描述
我有一个问题,我还没有找到解决方案。我有一个图形,它位于 cose-bilkent 布局中,我想创建一个新布局来显示选择节点的子节点。我正在使用函数 makeLayout() 但问题是我仍然看到新布局不包含的节点。
data = dataArray[0];
style = dataArray[1];
var nodes = [];
var edges = [];
for (var i=0; i<data.length; i++) {
if (data[i].group == 'nodes') {
nodes.push(data[i]);
}
else if (data[i].group == 'edges') {
edges.push(data[i]);
}
}
var elements = {nodes, edges};
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: style,
elements: elements,
ready: function(){
window.cy = this;
}
});
var layout = cy.layout({name: 'cose-bilkent'});
layout.run();
function highlight( node ){
var nodeId = node.id();
var childNodes = cy.nodes('node[parent="'+nodeId+'"]');
var nhood = lastHighlighted = childNodes;
var others = lastUnhighlighted = cy.elements().not( nhood );
others.style("visibility", "hidden");
nhood.style("visibility", "visible");
var layoutZoom = nhood.makeLayout({
name: 'grid',
fit: true,
elements: nhood
});
layout.stop();
layoutZoom.run();
}
function clear(){
cy.elements().style("visibility", "visible");
layout.run();
}
cy.on('select unselect', 'node', function(e){
var node = cy.$('node:selected');
if(node.nonempty()){
Promise.resolve().then(function(){
return highlight(node);
});
}
else {
clear();
}
});
我做错了什么隐藏所有节点。
完整代码在这里:https ://github.com/bartequ/inz
解决方案
看看我的代码笔,为您的问题提供一个功能齐全的解决方案:)
cy.on('click', 'node', function(node) {
// get nodes id
var nodeId = node.target.id();
// add all successors (nodes and edges) to a collection
var childNodes = cy.nodes('[id="'+nodeId+'"]').successors();
// add clicked node to collection
childNodes = childNodes.add(node.target);
// add other nodes to other collection
var others = cy.elements().not(childNodes);
//cy.remove() returns the deleted nodes and edges, so that you can just do cy.add() afterwards
referenceNodes = cy.remove(others);
// just call a new layout
cy.elements().makeLayout({'name': 'dagre', 'padding': 5 }).run();
});
推荐阅读
- flutter - Flutter:子块正在初始化,但数据尚未存储在 shared_preferences 中
- flutter - 列小部件内的嵌套 TabView
- php - 使用 Mailjet 在 PHP 中发送电子邮件
- java - 将元素添加到现有的 REST-api
- python - 关于sklearn中的confusion_matrix()
- reactjs - react - 生产中的 webpack sass/scss 模块
- sql - postgres - 可以使用窗口函数来解决此查询吗?
- c++ - C++ 模板函数和定义特殊情况
- vim - fzf.vim 动态更改工作目录
- c# - 当我将 playerprefs save 转换为标准文件 io save 时出现 Unity 问题