CODEWITHSUNDEEP
cytoscape.js
iwatobipen
iwatobipen

Reputation: 53

Set Node Size with the amount of edges in cytoscape.js

I'm trying to draw a molecular similarity network using cytoscape.js. I want to set node size to the amount of edges in network. Now I have network data as JSON Format. I want to now that how set each node size using node degree. Any help is appreciated.

Thanks

Upvotes: 5

Views: 3581

Answers (2)

Vladimir Avdoshka
Vladimir Avdoshka

Reputation: 509

some dynamic styling behaviour that worked out pretty well for me:

{
  selector: 'node',
  style: {
    width: function(ele){ return ele.degree(); },
    height: function(ele){ return ele.degree(); }
  }
}

same but with some sort of a factor applied

{
  selector: 'node',
  style: {
    width: function(ele){ return Math.max(1, Math.ceil(ele.degree()/2)) * 10; },
    height: function(ele){ return Math.max(1, Math.ceil(ele.degree()/2)) * 10; },
  }
}

Upvotes: 1

maxkfranz
maxkfranz

Reputation: 12242

In your stylesheet, you can define the style according to degree.

e.g.:

node[[degree = 0]] { /* ... */ }
node[[degree >= 1]][[degree <= 3]] { /* ... */ }
node[[degree >= 4]] { /* ... */ }

Refer to the data selectors and use the [[metadata]] double square brackets.

If you need more precision (i.e. on the JS code level rather than the stylesheet level):

If your graph is static, you could add a degree data attribute to each node and use a mapper in your stylesheet with that attribute. If your graph is dynamic, you could use the same approach but update the degree attribute as the graph is modified.

Upvotes: 7

Related Questions