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

Question

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

Panayiotis

Answer 1

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.

Faxun

It would be awesome if we could use the metadata in mapData as it can be used in the stylesheet. Do you think it would be realistic to implement that? – Dissension

@Dissension Use a function and you can specify whatever mapping you'd like. – Faxun

May be I am not doing it right, but this doesn't work for me.. I tried node[[degree < 10]] { 'size': 1 }, node[[degree >= 10]] {'size': 4} – Serviceable

Answer 2

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; },
  }
}

Ebarta