如何突出相邻的节点在Cytoscape.js

我使用cytoscape.js和想补充的鼠标悬停或节点的水龙头功能到样式应用于：如何突出相邻的节点在Cytoscape.js

变化相邻的风格节点 - 一阶
淡出未连接

我似乎能够得到邻居的节点，我如何样式应用于非邻居什么想法？

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

      });

来源

2015-07-20 moonlife

使用差集：http://js.cytoscape.org/#collection/building--filtering/eles.difference

cy.elements().difference(dontIncludeTheseEles)

来源

2015-07-20 13:06:42 maxkfranz

嗨马克斯，感谢您的答复：

的风格为 '亮点' 和 'semitransp' 类示例。这是如何与鼠标悬停一起使用的，以便只显示连接到单个节点的节点？ – moonlife

我也试过eles.neighborhood（），但仍然没有成功。我浏览了js.cytoscape.com上的所有示例，gists，codepens等。是否有人成功实现了onhover功能来突出显示节点？也许这是一个错误？ – moonlife

要是你还没有找到解决突出一个节点的孩子，当鼠标悬停之一，这里是我的尝试，它的作品不错：

事件处理程序：

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”），并且类“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' } 
     } 
    ] 
});

来源

2016-07-19 21:33:18 Polosson

应该记住将类的样式表添加到cy对象，否则addClass不起作用。 –

如何突出相邻的节点在Cytoscape.js

回答

相关问题