Getting list of edges in cytoscape.js when clicking on a node

问题

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!

回答1:

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", (evt) => {
  evt.cyTarget.connectedEdges().animate({
    style: {lineColor: "red"}
  })
})

回答2:

Use nodes.connectedEdges() to get the edges connected to a node : http://js.cytoscape.org/#nodes.connectedEdges

来源：https://stackoverflow.com/questions/35331949/getting-list-of-edges-in-cytoscape-js-when-clicking-on-a-node