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
|
* Copyright (c) 2010 Dennis Hotson
|
||||||
*
|
*
|
||||||
|
@ -25,6 +25,9 @@
|
||||||
* OTHER DEALINGS IN THE SOFTWARE.
|
* OTHER DEALINGS IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// Enable strict mode for EC5 compatible browsers
|
||||||
|
"use strict";
|
||||||
|
|
||||||
var Graph = function() {
|
var Graph = function() {
|
||||||
this.nodeSet = {};
|
this.nodeSet = {};
|
||||||
this.nodes = [];
|
this.nodes = [];
|
||||||
|
@ -74,7 +77,7 @@ Graph.prototype.addNodes = function() {
|
||||||
// is a string that becomes both node identifier and label
|
// is a string that becomes both node identifier and label
|
||||||
for (var i = 0; i < arguments.length; i++) {
|
for (var i = 0; i < arguments.length; i++) {
|
||||||
var name = arguments[i];
|
var name = arguments[i];
|
||||||
var node = new Node(name, data = {label:name});
|
var node = new Node(name, {label:name});
|
||||||
this.addNode(node);
|
this.addNode(node);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -140,6 +143,39 @@ Graph.prototype.newEdge = function(source, target, data) {
|
||||||
return edge;
|
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
|
// find the edges from node1 to node2
|
||||||
Graph.prototype.getEdges = function(node1, node2) {
|
Graph.prototype.getEdges = function(node1, node2) {
|
||||||
if (node1.id in this.adjacency
|
if (node1.id in this.adjacency
|
||||||
|
@ -493,7 +529,7 @@ Layout.ForceDirected.prototype.getBoundingBox = function() {
|
||||||
|
|
||||||
|
|
||||||
// Vector
|
// Vector
|
||||||
Vector = function(x, y) {
|
var Vector = function(x, y) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
this.y = y;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user