| ForceDirected.js | |
| ForceDirected | A visualization that lays graphs using a Force-Directed layout algorithm. |
| Functions | |
| refresh | Computes positions and plots the tree. |
| computeIncremental | Performs the Force Directed algorithm incrementally. |
| plot | Plots the ForceDirected graph. |
| animate | Animates the graph from the current positions to the ‘end’ node positions. |
| ForceDirected.Op | Custom extension of Graph.Op. |
| ForceDirected.Plot | Custom extension of Graph.Plot. |
| ForceDirected. | Custom extension of Graph.Label. |
| ForceDirected. | This class contains a list of Graph.Node built-in types. |
| ForceDirected. | This class contains a list of Graph.Adjacence built-in types. |
A visualization that lays graphs using a Force-Directed layout algorithm.
Force-Directed Drawing Algorithms (Stephen G. Kobourov) http://www.cs.brown.edu
All Loader methods
Inherits options from
Additionally, there are two parameters
| levelDistance | (number) Default’s 50. The natural length desired for the edges. |
| iterations | (number) Default’s 50. The number of iterations for the spring layout simulation. Depending on the browser’s speed you could set this to a more ‘interesting’ number, like 200. |
| canvas | Access a Canvas instance. |
| graph | Access a Graph instance. |
| op | Access a ForceDirected.Op instance. |
| fx | Access a ForceDirected.Plot instance. |
| labels | Access a ForceDirected.Label interface implementation. |
| Functions | |
| refresh | Computes positions and plots the tree. |
| computeIncremental | Performs the Force Directed algorithm incrementally. |
| plot | Plots the ForceDirected graph. |
| animate | Animates the graph from the current positions to the ‘end’ node positions. |
computeIncremental: function( opt )
Performs the Force Directed algorithm incrementally.
ForceDirected algorithms can perform many computations and lead to JavaScript taking too much time to complete. This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and avoiding browser messages such as “This script is taking too long to complete”.
| opt | (object) The object properties are described below |
| iter | (number) Default’s 20. Split the algorithm into pieces of iter iterations. For example, if the iterations configuration property of your ForceDirected class is 100, then you could set iter to 20 to split the main algorithm into 5 smaller pieces. |
| property | (string) Default’s end. Whether to update starting, current or ending node positions. Possible values are ‘end’, ‘start’, ‘current’. You can also set an array of these properties. If you’d like to keep the current node positions but to perform these computations for final animation positions then you can just choose ‘end’. |
| onStep | (function) A callback function called when each “small part” of the algorithm completed. This function gets as first formal parameter a percentage value. |
| onComplete | A callback function called when the algorithm completed. |
In this example I calculate the end positions and then animate the graph to those positions
var fd = new $jit.ForceDirected(...);
fd.computeIncremental({
iter: 20,
property: 'end',
onStep: function(perc) {
Log.write("loading " + perc + "%");
},
onComplete: function() {
Log.write("done");
fd.animate();
}
});In this example I calculate all positions and (re)plot the graph
var fd = new ForceDirected(...);
fd.computeIncremental({
iter: 20,
property: ['end', 'start', 'current'],
onStep: function(perc) {
Log.write("loading " + perc + "%");
},
onComplete: function() {
Log.write("done");
fd.plot();
}
});Custom extension of Graph.Label. Contains custom Graph.Label.SVG, Graph.Label.HTML and Graph.Label.Native extensions.
All Graph.Label methods and subclasses.
Graph.Label, Graph.Label.Native, Graph.Label.HTML, Graph.Label.SVG.
This class contains a list of Graph.Node built-in types. Node types implemented are ‘none’, ‘circle’, ‘triangle’, ‘rectangle’, ‘star’, ‘ellipse’ and ‘square’.
You can add your custom node types, customizing your visualization to the extreme.
ForceDirected.Plot.NodeTypes.implement({
'mySpecialType': {
'render': function(node, canvas) {
//print your custom node to canvas
},
//optional
'contains': function(node, pos) {
//return true if pos is inside the node or false otherwise
}
}
});This class contains a list of Graph.Adjacence built-in types. Edge types implemented are ‘none’, ‘line’ and ‘arrow’.
You can add your custom edge types, customizing your visualization to the extreme.
ForceDirected.Plot.EdgeTypes.implement({
'mySpecialType': {
'render': function(adj, canvas) {
//print your custom edge to canvas
},
//optional
'contains': function(adj, pos) {
//return true if pos is inside the arc or false otherwise
}
}
});Computes positions and plots the tree.
refresh: function()
Performs the Force Directed algorithm incrementally.
computeIncremental: function( opt )
Plots the ForceDirected graph.
plot: function()
Animates the graph from the current positions to the ‘end’ node positions.
animate: function( opt )