Built with blockbuilder.org
forked from titoufish's block: fresh block
license: mit |
Built with blockbuilder.org
forked from titoufish's block: fresh block
<!doctype html> | |
<html> | |
<head> | |
<title>Tutorial 1: Getting Started</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.12/cytoscape.min.js"></script> | |
</head> | |
<style> | |
#cy { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
} | |
</style> | |
<body> | |
<div id="cy"></div> | |
<script> | |
var cy = cytoscape({ | |
container: document.getElementById('cy'), | |
elements: [ | |
{ data: { id: 'a' } }, | |
{ data: { id: 'b' } }, | |
{ | |
data: { | |
id: 'ab', | |
source: 'a', | |
target: 'b' | |
} | |
}], | |
style: [ | |
{selector : 'node', | |
style: { | |
shape : 'hexagon', | |
'background-color' : 'red', | |
label : 'data(id)' | |
}} | |
] | |
}); | |
for (var i = 0; i < 10; i++) { | |
cy.add({ | |
data: { id: 'node' + i } | |
} | |
); | |
var source = 'node' + i; | |
cy.add({ | |
data: { | |
id: 'edge' + i, | |
source: source, | |
target: (i % 2 == 0 ? 'a' : 'b') | |
} | |
}); | |
} | |
cy.layout({ | |
name: 'circle' | |
}).run(); | |
</script> | |
</body> | |
</html> | |