CODEWITHSUNDEEP
javascriptgraphcytoscape.js
Tejus
Tejus

Reputation: 111

Set different shapes for different nodes in cytoscape.js

I have the following fields as my nodes data: 

nodes {
    data: {id: "something",     type: "human"}
    data: {id: "somethingElse", type: "mouse"}
}

Is there any way to set the shapes of the nodes based on the type in data?

Upvotes: 10

Views: 7984

Answers (2)

viv
viv

Reputation: 121

You can structure the cytoscape style element and selectors, like in the code snippet below:

style: [
  {
    selector: 'node[type="human"]',
    style: {
      'shape': 'triangle',
      'background-color': 'red'
    }
  },
  {
    selector: 'node[type="mouse"]',
    style: {
      'shape': 'square',
      'background-color': 'blue'
    }
  }
]

Upvotes: 12

maxkfranz
maxkfranz

Reputation: 12250

Use a stylesheet with appropriate selectors, e.g.:

node[type = 'foo'] {
  background-color: red;
  shape: star;
  /* ... */
}

Upvotes: 3

Related Questions