Friday, 6 September 2013

Replacing contents of HTML canvas with Springy force-directed graph

Replacing contents of HTML canvas with Springy force-directed graph

I have a nice force-directed graph using the Springy force-directed graph
layout library. I've discovered that when I replace the graph with another
via ajax (e.g., after the user has changed some settings), both graphs
occupy the same canvas.
Here's a simplified usecase jsfiddle: http://jsfiddle.net/XPAqX/
// make a new graph
var graph = new Springy.Graph();
// make some nodes
var spruce = graph.newNode({label: 'Norway Spruce'});
var fir = graph.newNode({label: 'Sicilian Fir'});
// connect them with an edge
graph.newEdge(spruce, fir);
$('#my_canvas').springy({ graph: graph, nodeSelected: function(node) {
alert(node.data.label);
} });
//now, I let the user update the dataset with ajax and re-render the graph.
graph = null;
graph = new Springy.Graph();
// make some nodes
var kittens = graph.newNode({label: 'Furry Baby Cats'});
var puppies = graph.newNode({label: 'Fluffy Baby Dogs'});
// connect them with an edge
graph.newEdge(kittens,puppies);
$('#my_canvas').springy({ graph: graph });
Quick note: cross-posted as an issue on the springy github, no answers yet
though: https://github.com/dhotson/springy/issues/47

No comments:

Post a Comment