2010-04-16 01:42:51 +00:00
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
|
|
|
|
|
<script src="springy.js"></script>
|
2010-06-15 11:15:40 +00:00
|
|
|
<script src="springyui.js"></script>
|
2010-04-16 01:42:51 +00:00
|
|
|
<script>
|
2013-03-14 13:30:14 +00:00
|
|
|
var graph = new Springy.Graph();
|
2010-04-16 01:42:51 +00:00
|
|
|
|
2013-03-14 11:26:28 +00:00
|
|
|
var dennis = graph.newNode({
|
|
|
|
|
label: 'Dennis',
|
|
|
|
|
ondoubleclick: function() { console.log("Hello!"); }
|
|
|
|
|
});
|
2010-06-15 11:15:40 +00:00
|
|
|
var michael = graph.newNode({label: 'Michael'});
|
|
|
|
|
var jessica = graph.newNode({label: 'Jessica'});
|
|
|
|
|
var timothy = graph.newNode({label: 'Timothy'});
|
|
|
|
|
var barbara = graph.newNode({label: 'Barbara'});
|
|
|
|
|
var franklin = graph.newNode({label: 'Franklin'});
|
|
|
|
|
var monty = graph.newNode({label: 'Monty'});
|
|
|
|
|
var james = graph.newNode({label: 'James'});
|
|
|
|
|
var bianca = graph.newNode({label: 'Bianca'});
|
|
|
|
|
|
2012-11-05 07:20:37 +00:00
|
|
|
graph.newEdge(dennis, michael, {color: '#00A0B0'});
|
2010-06-15 11:15:40 +00:00
|
|
|
graph.newEdge(michael, dennis, {color: '#6A4A3C'});
|
|
|
|
|
graph.newEdge(michael, jessica, {color: '#CC333F'});
|
|
|
|
|
graph.newEdge(jessica, barbara, {color: '#EB6841'});
|
|
|
|
|
graph.newEdge(michael, timothy, {color: '#EDC951'});
|
|
|
|
|
graph.newEdge(franklin, monty, {color: '#7DBE3C'});
|
|
|
|
|
graph.newEdge(dennis, monty, {color: '#000000'});
|
|
|
|
|
graph.newEdge(monty, james, {color: '#00A0B0'});
|
|
|
|
|
graph.newEdge(barbara, timothy, {color: '#6A4A3C'});
|
|
|
|
|
graph.newEdge(dennis, bianca, {color: '#CC333F'});
|
|
|
|
|
graph.newEdge(bianca, monty, {color: '#EB6841'});
|
|
|
|
|
|
2011-08-15 04:10:13 +00:00
|
|
|
jQuery(function(){
|
2013-03-14 10:53:03 +00:00
|
|
|
var springy = window.springy = jQuery('#springydemo').springy({
|
2013-03-12 12:46:41 +00:00
|
|
|
graph: graph,
|
|
|
|
|
nodeSelected: function(node){
|
|
|
|
|
console.log('Node selected: ' + JSON.stringify(node.data));
|
|
|
|
|
}
|
|
|
|
|
});
|
2010-04-16 01:42:51 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
2010-06-15 11:15:40 +00:00
|
|
|
|
|
|
|
|
<canvas id="springydemo" width="640" height="480" />
|
2010-04-16 01:42:51 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
