CODEWITHSUNDEEP
javascriptgraphcytoscape.js
Voytek
Voytek

Reputation: 53

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!

Upvotes: 5

Views: 5714

Answers (2)

Erik Kaplun
Erik Kaplun

Reputation: 38207

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"}
  })
})

Upvotes: 7

maxkfranz
maxkfranz

Reputation: 12242

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

Upvotes: 3

Related Questions