Basic Graph layouts library in JS. An extension of [Springy] (https://github.com/dhotson/springy)
Springy is a force directed graph layout algorithm. Springy++ is an extention of Springy.
- It use webworker to do the calclation
- It allows more easliy to add new layout
- It has ISOM layout as well
- Use Grunt task make developing faster. i.e grunt server.
- Use Grunt task to build new source[ since webworker should share some code with main module. some of the source have been splited to files in order to alllow web worker load it as well. grunt build = concat all scripts together)
It basically means that it uses some real world physics to try and figure out how to show a network graph in a nice way.
Try to imagine it as a bunch of springs connected to each other.
TODO -
Currently in isom branch
untill i will clean it a bit
medium demo of isom vs force direct
Demo
can be found here
springy.js by itself is quite plain and doesn't include any code to do rendering or drag and drop etc. It's just for calculating the layout.
The drawing and interaction stuff is mostly up to you.
However, I've written a little helper jQuery plugin called springyui.js to help get you started. It's got a semi-decent default renderer and some half assed drag and drop.
See demo.html for the way to 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 demo-simple.html:
var graph = new Springy.Graph();
graph.addNodes('mark', 'higgs', 'other', 'etc');
graph.addEdges(
['mark', 'higgs'],
['mark', 'etc'],
['mark', 'other']
);
Springy 1.2+ also accepts JSON, see demo-json.html:
graphJSON = {
"nodes": ["mark", "higgs", "other", "etc"],
"edges": [
["mark", "higgs"],
["mark", "etc"],
["mark", "other"]
]
};
var graph = new Springy.Graph();
graph.loadJSON(graphJSON);
If you're keen to do your own custom drawing, you'll need to know a few things before you get started.
This is the basic graph API, you can create nodes and edges etc.
// make a new graph
var graph = new Springy.Graph();
// make some nodes
var node1 = graph.newNode({label: '1'});
var node2 = graph.newNode({label: '2'});
// connect them with an edge
graph.newEdge(node1, node2);
So now to draw this graph, lets make a layout object:
var layout = new Springy.Layout.ForceDirected(graph, 400.0, 400.0, 0.5);
I've written a Renderer class, which will handle the rendering loop. You just need to provide some callbacks to do the actual drawing.
var renderer = new Springy.Renderer(layout,
function clear() {
// code to clear screen
},
function drawEdge(edge, p1, p2) {
// draw an edge
},
function drawNode(node, p) {
// draw a node
}
);
Now, just start the rendering loop:
renderer.start();
Have a look at the code in springy.js. Seriously, it's not very much code and it should be pretty easy to understand.
Please let me know if anything is unclear. Feedback is welcome.
Thanks to Lachlan Donald for his helpful suggestions and feedback.