Cytoscape.js Edge and Arrow Style - cytoscape.js

Question

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.

Answer 1

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: {...}
},
{
...
}
]