Cytoscape JS скрыть элементы, которые не содержит новый макет - PullRequest
Новая
       6

Cytoscape JS скрыть элементы, которые не содержит новый макет

0 голосов
/ 21 октября 2018

У меня проблема, и я не нашел решения.У меня есть график, который расположен с макетом 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

1 Ответ

0 голосов
/ 26 октября 2018

Взгляните на мой кодовый код , чтобы получить полностью функциональное решение вашей проблемы:) 

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