Set different shapes for different nodes in cytoscape.js

Question

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?

Answer 1

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'
    }
  }
]

Answer 2

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

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