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/[email protected]/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/[email protected]/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?
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:
I hope this helps!