单击节点时获取 cytoscape.js 中的边列表答案

【问题标题】：Getting list of edges in cytoscape.js when clicking on a node单击节点时获取 cytoscape.js 中的边列表
【发布时间】：2016-05-21 19:02:28
【问题描述】：

我正在尝试创建一个 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() 一起使用以获取可以迭代以更改边缘颜色的边缘数组？

非常感谢！

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

您不需要从事件处理程序返回边缘，您可以立即在事件处理程序中进行着色，如下所示：

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

【讨论】：