96 lines
2.2 KiB
Markdown
96 lines
2.2 KiB
Markdown
Springy
|
|
====
|
|
|
|
A force directed graph layout algorithm in JavaScript.
|
|
|
|
What is this?
|
|
----
|
|
|
|
Springy is a force directed graph layout algorithm.
|
|
|
|
So what does this 'force directed' stuff mean anyway? Excellent question!
|
|
|
|
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.
|
|
|
|
|
|
Demo
|
|
----
|
|
|
|
[demo](http://dhotson.github.com/springy/demo.html)
|
|
|
|
|
|
Basic Usage
|
|
----
|
|
|
|
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 and springyui.js for an example of usage.
|
|
|
|
|
|
Advanced Usage
|
|
----
|
|
|
|
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 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 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 Renderer(10, 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();
|
|
|
|
|
|
Further Reading
|
|
----
|
|
|
|
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.
|
|
|
|
|
|
Acknowledgements
|
|
----
|
|
|
|
Thanks to [Lachlan Donald](http://github.com/lox) for his helpful suggestions and
|
|
feedback.
|