单击节点时获取 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() 鼠标单击事件来 return 一个值,该值可以与 cy.edges() 一起使用以获得可以迭代以更改颜色的边数组的边缘?

非常感谢!

使用nodes.connectedEdges()让边连接到节点:http://js.cytoscape.org/#nodes.connectedEdges

您不需要 return 事件处理程序的边缘,您可以立即在事件处理程序中进行着色,如下所示:

cy.on("tap", "node", (evt) => {
  evt.cyTarget.connectedEdges().animate({
    style: {lineColor: "red"}
  })
})