open.source/springy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add JSON load capabilities to Springy.

Browse Source
This commit is contained in:
anatoly techtonik 2013-03-12 14:31:14 +03:00
parent 6c04b2416f
commit 1b93bd7dc7
3 changed files with 94 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.mkdn
View File

@ -22,6 +22,8 @@ Demo
---- ----
[demo](http://dhotson.github.com/springy/demo.html) [demo](http://dhotson.github.com/springy/demo.html)
: [demo2](http://dhotson.github.com/springy/demo2.html)
: [demo3](http://dhotson.github.com/springy/demo3.html)
Getting Started Getting Started
@ -43,7 +45,7 @@ See [demo.html](http://dhotson.github.com/springy/demo.html) for the way to
add nodes and edges to graph and springyui.js for the rendering example. add nodes and edges to graph and springyui.js for the rendering example.
Springy 1.1+ supports simplified API for adding nodes and edges, see Springy 1.1+ supports simplified API for adding nodes and edges, see
[demo2.html](http://techtonik.github.com/springy/demo2.html): [demo2.html](http://dhotson.github.com/springy/demo2.html):
var graph = new Graph(); var graph = new Graph();
graph.addNodes('mark', 'higgs', 'other', 'etc'); graph.addNodes('mark', 'higgs', 'other', 'etc');
@ -53,6 +55,22 @@ Springy 1.1+ supports simplified API for adding nodes and edges, see
['mark', 'other'] ['mark', 'other']
); );
Springy 1.2+ also accepts JSON, see
[demo3.html](http://dhotson.github.com/springy/demo3.html):
graphJSON = {
"nodes": ['mark', 'higgs', 'other', 'etc'],
"edges": [
['mark', 'higgs'],
['mark', 'etc'],
['mark', 'other']
]
};
var graph = new Graph();
graph.loadJSON(graphJSON);
Advanced Drawing Advanced Drawing
---- ----

37
demo3.html Normal file
View File

@ -0,0 +1,37 @@
<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', {color: '#7DBE3C'}],
//['Alcmene', 'Amphitryon', {color: '#BE7D3C'}],
['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>

38
springy.js
View File

@ -148,6 +148,44 @@ 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) {
var graph = this;
json['nodes'].forEach(function(name) {
graph.addNode(name);
});
json['edges'].forEach(function(pair) {
graph.addEdges(pair);
});
}
}
// 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