Summary

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

- Options.Canvas
- Options.Controller
- Options.Node
- Options.Edge
- Options.Label
- Options.Events
- Options.Tips
- Options.NodeStyles
- Options.Navigation

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. |

Summary

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 )

Perform Graph operations like adding/removing Graph.Nodes or Graph.Adjacences, morphing a Graph into another Graph, contracting or expanding subtrees, etc.

Graph rendering and animation methods.

An interface for plotting/hiding/showing labels.

A Graph node.

A Graph adjacence (or edge) connecting two Graph.Nodes.

Provides methods for loading and serving JSON data.

These are Canvas general options, like where to append it in the DOM, its dimensions, background, and other more advanced options.

Provides controller methods.

Provides Node rendering options for Tree and Graph based visualizations.

Provides Edge rendering options for Tree and Graph based visualizations.

Provides styling for Labels such as font size, family, etc.

Configuration for adding mouse/touch event handlers to Nodes.

Tips options

Apply different styles when a node is hovered or selected.

Panning and zooming options for Graph/Tree based visualizations.

A canvas widget used by all visualizations.

A Graph Class that provides useful manipulation functions.

Custom extension of Graph.Op.

Custom extension of Graph.Plot.

Custom extension of Graph.Label.

A visualization that lays graphs using a Force-Directed layout algorithm.

Implements SVG labels.

Implements HTML labels.

Implements labels natively, using the Canvas text API.