Cytoscape js在节点上单击时如何获取所有边缘（文本标签）

Posted 2023-02-21

我知道我可以使用node.connectedEdges（）返回连接到该节点的边的对象。如何访问所有边缘的数据字段。我希望能够单击一个节点，并在列表中具有连接的边缘标签（文本）。

此外，当您单击节点时，如何访问该节点的元数据（节点JSON对象中的其他属性）。

谢谢

答案

嗯，可以使用.data()方法访问节点/边缘元数据中的所有内容。这是一项核心功能，我建议您看看.data()，因为这是一个相当简单的任务。您要做的就是调用docs方法并相应地映射结果对象（使用.connectedEdges()）：

.connectedEdges()

.data()

var cy = window.cy = cytoscape(
  container: document.getElementById('cy'),

  style: [
      selector: 'node',
      css: 
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'border-width': '10px'
      
    ,
    
      selector: 'edge',
      css: 
        'target-arrow-shape': 'triangle'
      
    ,
    
      selector: ':selected',
      css: 
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      
    
  ],

  elements: 
    nodes: [
        data: 
          id: 'n0'
        
      ,
      
        data: 
          id: 'n1'
        
      ,
      
        data: 
          id: 'n2'
        
      ,
      
        data: 
          id: 'n3'
        
      ,
      
        data: 
          id: 'n4'
        
      ,
      
        data: 
          id: 'n5'
        
      ,
      
        data: 
          id: 'n6'
        
      ,
      
        data: 
          id: 'n7'
        
      ,
      
        data: 
          id: 'n8'
        
      ,
      
        data: 
          id: 'n9'
        
      ,
      
        data: 
          id: 'n10'
        
      ,
      
        data: 
          id: 'n11'
        
      ,
      
        data: 
          id: 'n12'
        
      ,
      
        data: 
          id: 'n13'
        
      ,
      
        data: 
          id: 'n14'
        
      ,
      
        data: 
          id: 'n15'
        
      ,
      
        data: 
          id: 'n16'
        
      
    ],
    edges: [
        data: 
          source: 'n0',
          target: 'n1'
        
      ,
      
        data: 
          source: 'n1',
          target: 'n2'
        
      ,
      
        data: 
          source: 'n1',
          target: 'n3'
        
      ,
      
        data: 
          source: 'n2',
          target: 'n7'
        
      ,
      
        data: 
          source: 'n2',
          target: 'n11'
        
      ,
      
        data: 
          source: 'n2',
          target: 'n16'
        
      ,
      
        data: 
          source: 'n3',
          target: 'n4'
        
      ,
      
        data: 
          source: 'n3',
          target: 'n16'
        
      ,
      
        data: 
          source: 'n4',
          target: 'n5'
        
      ,
      
        data: 
          source: 'n4',
          target: 'n6'
        
      ,
      
        data: 
          source: 'n6',
          target: 'n8'
        
      ,
      
        data: 
          source: 'n8',
          target: 'n9'
        
      ,
      
        data: 
          source: 'n8',
          target: 'n10'
        
      ,
      
        data: 
          source: 'n11',
          target: 'n12'
        
      ,
      
        data: 
          source: 'n12',
          target: 'n13'
        
      ,
      
        data: 
          source: 'n13',
          target: 'n14'
        
      ,
      
        data: 
          source: 'n13',
          target: 'n15'
        
      ,
    ]
  ,

  layout: 
    name: 'dagre',
    padding: 5
  
);


cy.ready(function() 
  cy.unbind('click')
  cy.bind('click', 'node', function(event) 
    let edges = event.target.connectedEdges().map(edge => edge.data().id)
    console.log(edges)
  )
)

以上是关于Cytoscape js在节点上单击时如何获取所有边缘（文本标签）的主要内容，如果未能解决你的问题，请参考以下文章

如何在不使用 cytoscape.js 重绘图形的情况下删除特定边？

在Cytoscape JS中选择节点时更改颜色

Cytoscape.js 的性能和布局

在 cytoscape.js "on('unselect')" 事件中查找选定的节点/边缘

cytoscape.js 图，仅显示/绘制少数节点和边缘

带有固定节点的 Javascript cytoscape.js 自动布局