Search code examples
cytoscape.jscytoscape

cytoscape.js not importing style


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>

Solution

  • 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>