如何突出相鄰的節點在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

回答

相關問題