CODEWITHSUNDEEP
cytoscape.js
Jane Doe
Jane Doe

Reputation: 51

Make Cytoscape.js Node a Link

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?

Upvotes: 5

Views: 1842

Answers (3)

orangey
orangey

Reputation: 111

basically like this:

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

Upvotes: 0

MySky
MySky

Reputation: 161

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');
  }
});

Upvotes: 7

desc
desc

Reputation: 1210

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)',}}

Upvotes: 0

Related Questions