RGraph.js | |
RGraph | A radial graph visualization with advanced animations. |
Functions | |
refresh | Computes positions and plots the tree. |
plot | Plots the RGraph. |
onClick | Animates the RGraph to center the node specified by id. |
RGraph.Op | Custom extension of Graph.Op. |
RGraph.Plot | Custom extension of Graph.Plot. |
RGraph. | Custom extension of Graph.Label. |
RGraph. | This class contains a list of Graph.Node built-in types. |
RGraph. | This class contains a list of Graph.Adjacence built-in types. |
A radial graph visualization with advanced animations.
Animated Exploration of Dynamic Graphs with Radial Layout (Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst) http://bailando.sims.berkeley.edu
This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the visualization described in the paper.
All Loader methods
Inherits options from
Additionally, there are other parameters and some default values changed
interpolation | (string) Default’s linear. Describes the way nodes are interpolated. Possible values are ‘linear’ and ‘polar’. |
levelDistance | (number) Default’s 100. The distance between levels of the tree. |
canvas | Access a Canvas instance. |
graph | Access a Graph instance. |
op | Access a RGraph.Op instance. |
fx | Access a RGraph.Plot instance. |
labels | Access a RGraph.Label interface implementation. |
onClick: function( id, opt )
Animates the RGraph to center the node specified by id.
id | A Graph.Node id. |
opt | (optional|object) An object containing some extra properties described below |
hideLabels | (boolean) Default’s true. Hide labels when performing the animation. |
rgraph.onClick('someid'); //or also... rgraph.onClick('someid', { hideLabels: false });
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.
RGraph.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.
RGraph.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()
Plots the RGraph.
plot: function()
Animates the RGraph to center the node specified by id.
onClick: function( id, opt )