<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.8/cytoscape.min.js"></script>
</head>
<body onload="app.init(false)">
<button onclick="app.init(true)">
Redraw with self connecting node
</button>
<div id="cy">
</div>
</body>
</html>
var GraphApp = function () {
var cy;
var maxNodes = 200;
return {
init: function (includeSelfConnectingEdge) {
cy = cytoscape({
container: document.querySelector('#cy'),
boxSelectionEnabled: false,
style: cytoscape.stylesheet()
.selector('node')
.css({
'width': '100px',
'height': '100px',
'content': 'data(name)',
'text-valign': 'center',
'color': 'black',
'border-color': '#000',
'border-width': 3,
'background-color': '#ddd'
}),
elements: {
nodes: [
{ data: { id: 'parent', name: '' } }
]
}
});
for (var i = 0; i <= maxNodes; i++) {
cy.add({
data: { id: 'node' + i, name: '' + i }
});
var source = 'node' + i;
if(i > 0 || includeSelfConnectingEdge) {
cy.add({
data: {
id: 'edge' + i,
source: source,
target: 'node' + (Math.floor(Math.random() * (i)))
}
});
}
cy.add({
data: {
id: 'pEdge' + i,
source: source,
target: 'parent'
}
});
}
cy.layout({
name: 'cose',
animate: true
});
},
destroy: function () {
cy.destroy();
cy = null;
}
}
};
var app = new GraphApp();
/* Styles go here */
body {
font-family: helvetica;
font-size: 14px;
}
button {
background-color: red;
font-weight: bold;
}
#cy {
width: 600px;
height: 600px;
border: 1px solid #888;
}