Question

我遇到了问题，但没有找到解决方案。我有一个图形，该图形位于cose-bilkent布局中，我想创建一个新的布局，以显示select节点的子代。我正在使用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

Answer 1

看看我的codepen，为您的问题提供功能全面的解决方案：）

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();  
});

cytoscape js隐藏新布局不包含的元素

1 个答案: