Updated springy and demo files
This commit is contained in:
parent
d5545ea3ad
commit
8b12e8b038
34
demo-json.html
Normal file
34
demo-json.html
Normal file
|
@ -0,0 +1,34 @@
|
|||
<html>
|
||||
<body>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
|
||||
<script src="springy.js"></script>
|
||||
<script src="springyui.js"></script>
|
||||
<script>
|
||||
var graph = new Graph();
|
||||
graph.loadJSON(
|
||||
{
|
||||
"nodes": [
|
||||
'Amphitryon',
|
||||
'Alcmene',
|
||||
'Iphicles',
|
||||
'Heracles'
|
||||
],
|
||||
"edges": [
|
||||
['Amphitryon', 'Alcmene'],
|
||||
['Alcmene', 'Amphitryon'],
|
||||
['Amphitryon', 'Iphicles'],
|
||||
['Amphitryon', 'Heracles']
|
||||
]
|
||||
}
|
||||
);
|
||||
|
||||
jQuery(function(){
|
||||
var springy = jQuery('#springydemo').springy({
|
||||
graph: graph
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas id="springydemo" width="640" height="480" />
|
||||
</body>
|
||||
</html>
|
33
demo-simple.html
Normal file
33
demo-simple.html
Normal file
|
@ -0,0 +1,33 @@
|
|||
<html>
|
||||
<body>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
|
||||
<script src="springy.js"></script>
|
||||
<script src="springyui.js"></script>
|
||||
<script>
|
||||
var graph = new Graph();
|
||||
graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara')
|
||||
graph.addNodes('Amphitryon', 'Alcmene', 'Iphicles', 'Heracles');
|
||||
|
||||
graph.addEdges(
|
||||
['Dennis', 'Michael', {color: '#00A0B0', label: 'Foo bar'}],
|
||||
['Michael', 'Dennis', {color: '#6A4A3C'}],
|
||||
['Michael', 'Jessica', {color: '#CC333F'}],
|
||||
['Jessica', 'Barbara', {color: '#EB6841'}],
|
||||
['Michael', 'Timothy', {color: '#EDC951'}],
|
||||
['Amphitryon', 'Alcmene', {color: '#7DBE3C'}],
|
||||
['Alcmene', 'Amphitryon', {color: '#BE7D3C'}],
|
||||
['Amphitryon', 'Iphicles'],
|
||||
['Amphitryon', 'Heracles'],
|
||||
['Barbara', 'Timothy', {color: '#6A4A3C'}]
|
||||
);
|
||||
|
||||
jQuery(function(){
|
||||
var springy = jQuery('#springydemo').springy({
|
||||
graph: graph
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas id="springydemo" width="640" height="480" />
|
||||
</body>
|
||||
</html>
|
42
springy.js
42
springy.js
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Springy v1.1.0
|
||||
* Springy v1.2.0
|
||||
*
|
||||
* Copyright (c) 2010 Dennis Hotson
|
||||
*
|
||||
|
@ -25,6 +25,9 @@
|
|||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
// Enable strict mode for EC5 compatible browsers
|
||||
"use strict";
|
||||
|
||||
var Graph = function() {
|
||||
this.nodeSet = {};
|
||||
this.nodes = [];
|
||||
|
@ -74,7 +77,7 @@ Graph.prototype.addNodes = function() {
|
|||
// is a string that becomes both node identifier and label
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
var name = arguments[i];
|
||||
var node = new Node(name, data = {label:name});
|
||||
var node = new Node(name, {label:name});
|
||||
this.addNode(node);
|
||||
}
|
||||
};
|
||||
|
@ -140,6 +143,39 @@ Graph.prototype.newEdge = function(source, target, data) {
|
|||
return edge;
|
||||
};
|
||||
|
||||
|
||||
// add nodes and edges from JSON object
|
||||
Graph.prototype.loadJSON = function(json) {
|
||||
/**
|
||||
Springy's simple JSON format for graphs.
|
||||
|
||||
historically, Springy uses separate lists
|
||||
of nodes and edges:
|
||||
|
||||
{
|
||||
"nodes": [
|
||||
"center",
|
||||
"left",
|
||||
"right",
|
||||
"up",
|
||||
"satellite"
|
||||
],
|
||||
"edges": [
|
||||
["center", "left"],
|
||||
["center", "right"],
|
||||
["center", "up"]
|
||||
]
|
||||
}
|
||||
|
||||
**/
|
||||
|
||||
if ('nodes' in json || 'edges' in json) {
|
||||
this.addNodes.apply(this, json['nodes']);
|
||||
this.addEdges.apply(this, json['edges']);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// find the edges from node1 to node2
|
||||
Graph.prototype.getEdges = function(node1, node2) {
|
||||
if (node1.id in this.adjacency
|
||||
|
@ -493,7 +529,7 @@ Layout.ForceDirected.prototype.getBoundingBox = function() {
|
|||
|
||||
|
||||
// Vector
|
||||
Vector = function(x, y) {
|
||||
var Vector = function(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue
Block a user