单击节点时获取cytoscape.js中的边缘列表 [英] Getting list of edges in cytoscape.js when clicking on a node

问题描述

我试图创建一个cytoscape.js图，点击一个节点将改变连接到该节点的任何边的颜色。我已经能够找到各个组件，但无法让它们一起工作。我对JavaScript和cytoscape.js都很陌生，所以不要在你的答案中做出假设。

从这些示例中，可以注册一个鼠标单击事件，在这种情况下，会将节点的ID打印到控制台上。

  cy.on（'tap'，'node'，function（evt）{
 var node = evt。 cyTarget; 
 console.log（node.id（））; 
}）; 
  

如果已知明文ID，则可以通过此方式找到连接到特定节点的边线：

  cy.edges（[source ='NodeTextId']）
  

最后，边缘的颜色可以更新为：

  someEdge.animate（{
 css：{
'line-color'：'red'
} 
}）
  

如何使用 cy.on（）鼠标点击事件返回值与 cy.edges（）一起使用以获得可以迭代以更改边的颜色的边数组？

非常感谢！

解决方案

我相信你不会需要从事件处理程序返回边缘;您可以在事件处理程序中立即着色，如下所示：

  cy.on（'tap'，'node '，function（evt）{
 evt.cyTarget.connectedEdges（）。animate（{
 style：{lineColor：'red'} 
}）; 
}）; 
  

I'm trying to create a cytoscape.js graph in which clicking on a node will change the color of any edges connecting to the node. I've been able to locate individual components but am not able to get them to work together. I'm new to JavaScript as well as cytoscape.js so make no assumptions in your answer.

From the examples, a mouse-click event can be registered and in this case prints the ID of a node onto the console.

cy.on('tap', 'node', function(evt){
  var node = evt.cyTarget;
  console.log(  node.id() );
});

Edges connected to a specific node can be found in this fashion if their plain-text ID is known:

cy.edges("[source = 'NodeTextId']")

Finally, the color of an edge can be updated with:

someEdge.animate({
    css: {
        'line-color': 'red'
    }
})

How can I use the cy.on() mouse click event to return a value which can be used with cy.edges() to get an array of edges which can be iterated to change the colors of the edges?

Thanks so much!

解决方案

I believe you don't need to return the edges from the event handler; you can just do the coloring immediately in the event handler, something like this:

cy.on('tap', 'node', function(evt){
  evt.cyTarget.connectedEdges().animate({
    style: { lineColor: 'red' }
  });
});

这篇关于单击节点时获取cytoscape.js中的边缘列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！