CODEWITHSUNDEEP
cytoscape.js
William Nelson
William Nelson

Reputation: 75

How to change label of cytoscape nodes

This is very much a newbie cytoscape.js question. My nodes are labeled using data(lbl) as below, and I would like to dynamically switch to pulling the label from from a different data element, e.g. change to 'label': 'data(lbl2)'

style:[
 {
   selector: 'node',
   style: {
     'background-color': 'data(color)',
     'label': 'data(lbl)',
     'font-size' : '25px',
     'width' : 'data(size)',
     'height' : 'data(size)'
   }

To be honest I am not even sure how to properly iterate over all the nodes, let alone apply this style change. I had no trouble laying out a nice graph using the instructions provided, but it seems to me that the guidance for the javascript controls is quite telegraphic by comparison. There is no sample code that I could see showing simple operations being performed.

Upvotes: 2

Views: 3005

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

Use selectors as you would in HTML/CSS. The simplest case is classes.

style: [
  {
    selector: 'node.foo',
    style: {
      'label': data(foo)
    }
  },
  {
    selector: 'node.bar',
    style: {
      'label': data(bar)
    }
  }
  // ...
]

And then just use the classes functions:

node.removeClass('foo').addClass('bar')

Upvotes: 3

Related Questions