I use cytoscape.js 2.7.5 to display a graph exported by Cytoscape Desktop as graph.cyjs converted to a Javascript file graph.js containing "var graph = ... the content of the cyjs file ...;"
. With the following HTML I see the nodes and the edges but the style (colors, which attribute to use as node name) is not imported. How can I import the style as well?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="cytoscape.js"></script>
<script src="graph.js"></script>
</head>
<body>
<div id="cy" style="width:100%;height:100vh;"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy') // container to render in
});
cy.add(graph.elements);
</script>
</body>
</html>
Apparently, Cytoscape Desktop doesn't save style information in its .csjs files so this has to be exported and imported separately:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="cytoscape.js"></script>
<script src="graph.js"></script>
<script src="style.js"></script>
</head>
<body>
<div id="cy" style="width:100%;height:100vh;"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
style: style[0].style
});
cy.add(graph.elements);
</script>
</body>
</html>