CODEWITHSUNDEEP
cytoscape.js
Yonatan Klausner
Yonatan Klausner

Reputation: 51

Cytoscape.js Edge and Arrow Style

How do I add directions to my edges?
How do I label my vertices?

Right now I have: 

var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: graph_to_elements(graph),
        style: 'node { background-color: blue; }'
      });

graph is vertices and edges.
graph_to_elements is a function that graphs the inputted graph.

What other things can I add to style? When I tried adding different properties it would not work.

Upvotes: 5

Views: 12712

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

When you want to add directions to your edges, simply add the 'target-arrow-color' and 'target-arrow-shape' property to your style. You can see this in a very easy example here: http://js.cytoscape.org/#getting-started/specifying-basic-options

{
  selector: 'node',
  style: {
    'background-color': '#666',
    'label': 'data(id)' // here you can label the nodes 
  }
},

{
  selector: 'edge',
  style: {
    'width': 3,
    'line-color': '#ccc',
    'target-arrow-color': '#ccc',
    'target-arrow-shape': 'triangle' // there are far more options for this property here: http://js.cytoscape.org/#style/edge-arrow
}

Stick to the notation provided by cytoscape when initializing the graph, when you have more than one style to define, you want to write:

style: [
   {
       selector: '...'
       style: {...}
   },
   {
       ... 
   }
]

Upvotes: 5

Related Questions