Make Cytoscape.js Node a Link

Question

I am using cytoscape.js to make a simple graph network. I'd like each node to contain an href to link to more information, or on hover to display information as well. Is it possible to add this functionality to cytoscape nodes?

Flail

Have you reviewed the demos, the linkout demo for example? – Rollmop

Answer 1

First, add href to data tag. like this:

{ data: { id: 'c' , href: 'example.com'} }

Then insert this in script:

cy.on('tap', 'node', function(){
  try { // your browser may block popups
    window.open( this.data('href') );
  } catch(e){ // fall back on url change
    window.location.href = this.data('href');
  }
});     

Prince

Answer 2

You can add information when generating the node like:

data: {id: 'nodeName', label: 'nodeLabel', link: 'your_href'}

Then you could use qtip to display said link or merely make it part of the label.

You can call the link for each node using data(link) for the labels or this.data("link") in qtip:

{selector: 'edge', style: {'label': 'data(link)',}}

Unfrequented

Answer 3

basically like this:

{"selector": "node", "style": {'href link': "https://images.google.com/puppies","width": 50, "height": 5}}

Cuddy