So I want to render the following Cytoscape element but in the end there is nothing that appears on the screen.
let cy = cytoscape({
container: document.getElementById('cy'),
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
},
{
data: { id: 'c' }
},
{
data: {
id: 'ac', source: 'a', target: 'c',
'value': 'ceva',
'value2': 'data(target)',
}
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': 'red',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': 'blue',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
}
}
],
layout: {
name: 'grid',
rows: 1
}
})
cy.add([
{ group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } },
{ group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } },
{ group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } }
]);
This is the HTML:
<html>
<head>
<script src="./script.js"></script>
</head>
<body>
<div id="cy"></div>
<script src="./cyto.js"></script>
</body>
</html>
What the problem seems to me is the fact that the Cytoscape class ends up having the height = 0. After I modify the class in inspect element and add height = 1000px it works mostly fine. What could the solution be, I am new to Cytoscape so I think this might be a basic mistake.
I am using cytoscape with this kind of setup:
<div id="cy" style="width: 900px; height: 800px;"></div>
where height and width are set at the beginning.