Как выделить соседние узлы в Cytoscape.js

Question

Я использую cytoscape.js и хотел бы добавить функцию при наведении курсора мыши или нажатием узла применить стиль:

1. изменить стиль соседних узлы - первый степени
2. приглушить узлы, которые не связаны

я, кажется, чтобы быть в состоянии получить сосед, любые идеи, как я применить стиль к не соседям?

cy.on('tap', 'node', function(e) { 
       var node = e.cyTarget; 
       var directlyConnected = node.neighborhood(); 
       directlyConnected.nodes().addClass('connectednodes'); 

      }); 

Answer 1

Используйте разность множеств: http://js.cytoscape.org/#collection/building--filtering/eles.difference

cy.elements().difference(dontIncludeTheseEles)

Answer 2

Если бы вы не нашли решение, чтобы выделить детей узла при наведении курсора мыши парят один, вот моя попытка, и она работает хорошо : обработчик

Событие:

cy.on('mouseover', 'node', function(e){ 
    var sel = e.cyTarget; 
    cy.elements().difference(sel.outgoers()).not(sel).addClass('semitransp'); 
    sel.addClass('highlight').outgoers().addClass('highlight'); 
}); 
cy.on('mouseout', 'node', function(e){ 
    var sel = e.cyTarget; 
    cy.elements().removeClass('semitransp'); 
    sel.removeClass('highlight').outgoers().removeClass('highlight'); 
}); 

В принципе, все элементы фильтруются, если они не являются зависающим узлом или его прямыми дочерними элементами («outgoers»), и к ним добавляется класс semptansp.
Затем класс 'highlight' добавляется к зависающему узлу и всем его дочерним элементам.

Пример стиля для 'изюминки' и 'semitransp' класса:

var cy = cytoscape({ 
    elements: [ {...} ] 
    style: [ 
     {...}, 
     { 
      selector: 'node.highlight', 
      style: { 
       'border-color': '#FFF', 
       'border-width': '2px' 
      } 
     }, 
     { 
      selector: 'node.semitransp', 
      style:{ 'opacity': '0.5' } 
     }, 
     { 
      selector: 'edge.highlight', 
      style: { 'mid-target-arrow-color': '#FFF' } 
     }, 
     { 
      selector: 'edge.semitransp', 
      style:{ 'opacity': '0.2' } 
     } 
    ] 
});