Skip to content

Instantly share code, notes, and snippets.

@titoufish
Created June 5, 2018 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save titoufish/f27a6a507405997dac8f0cc1866fe0a4 to your computer and use it in GitHub Desktop.
Save titoufish/f27a6a507405997dac8f0cc1866fe0a4 to your computer and use it in GitHub Desktop.
fresh block
license: mit
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment