1

I would like to tryout cytoscape-dagre by creating a simple html. Here is my html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualization</title>
    <script src="https://unpkg.com/cytoscape@3.23.0/dist/cytoscape.min.js"></script>
    <script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>
    <style>
        #cy {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="cy"></div>
    <script>
        var cy = cytoscape({
          container: document.getElementById('cy'),
          elements: {
        nodes: [
          { data: { id: 'A' } },
          { data: { id: 'B' } }
        ],
        edges: [
          { data: { id: 'A-B', source: 'A', target: 'B' } }
        ]
      },
      layout: {
        name: 'dagre'
      }
    });
  </script>
</body>
</html>

But nothing is showing in the webpage. If I remove the layout part, it would render the nodes correctly. What do I miss to make the dagre layout working?

David M
  • 433
  • 1
  • 4
  • 10
  • I have the same issue. If you open the browser console you can see it shows `Cannot read properties of undefined (reading 'graphlib')`. Did you end up solving that issue? – roygbiv Aug 29 '23 at 10:00

2 Answers2

0

The code you provided appears to be correct and should work. I tested it on my end and it rendered a simple graph with two nodes ('A' and 'B') and one edge connecting them.

However, there are a few things you might want to check:

Make sure that you have internet connectivity, as the code relies on external resources (cytoscape and cytoscape-dagre scripts loaded from unpkg.com). If you're running the code offline, you might need to download these scripts and include them locally.

Check that you have included the correct version of Cytoscape and Cytoscape-Dagre. The code you provided is using version 3.23.0 of Cytoscape and version 2.5.0 of Cytoscape-Dagre. If you're using a different version, there might be compatibility issues.

Ensure that you have included the required CSS file for Cytoscape-Dagre. The code you provided doesn't include a CSS file, but Cytoscape-Dagre requires one. You can include it by adding the following line to your HTML head:

<link rel="stylesheet" href="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.css">

I hope this helps!

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
Ripon Miah
  • 1
  • 2
  • sorry what is the "following line" in your last paragraph? – David M Mar 26 '23 at 01:50
  • @DavidM: I've improved the formatting of Ripon's answer so that the line is visible. (It was unescaped markup, so Stack Overflow wasn't displaying it as code.) – Jeremy Caney Mar 31 '23 at 00:25
  • `https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.css` does not exist... OP's code also doesn't work for me – roygbiv Aug 29 '23 at 10:02
0

I had the same issue. After hours of trying to solve this, I found that adding:

<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>

above

<script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.js"></script>

solved the issue.

See also this answer which helped me.

roygbiv
  • 123
  • 8