RGraph.js

Summary
RGraph.js
RGraphA radial graph visualization with advanced animations.
Functions
refreshComputes positions and plots the tree.
plotPlots the RGraph.
onClickAnimates the RGraph to center the node specified by id.
RGraph.OpCustom extension of Graph.Op.
RGraph.PlotCustom extension of Graph.Plot.
RGraph.LabelCustom extension of Graph.Label.
RGraph.Plot.NodeTypesThis class contains a list of Graph.Node built-in types.
RGraph.Plot.EdgeTypesThis class contains a list of Graph.Adjacence built-in types.

RGraph

A radial graph visualization with advanced animations.

Inspired by

Animated Exploration of Dynamic Graphs with Radial Layout (Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst) http://bailando.sims.berkeley.edu/papers/infovis01.htm

Note

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.

Implements

All Loader methods

Constructor Options

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.

Instance Properties

canvasAccess a Canvas instance.
graphAccess a Graph instance.
opAccess a RGraph.Op instance.
fxAccess a RGraph.Plot instance.
labelsAccess a RGraph.Label interface implementation.
Summary
Functions
refreshComputes positions and plots the tree.
plotPlots the RGraph.
onClickAnimates the RGraph to center the node specified by id.

Functions

refresh

refresh: function()

Computes positions and plots the tree.

plot

plot: function()

Plots the RGraph.  This is a shortcut to fx.plot.

onClick

onClick: function(id,
opt)

Animates the RGraph to center the node specified by id.

Parameters

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

Example

rgraph.onClick('someid');
//or also...
rgraph.onClick('someid', {
 hideLabels: false
});

RGraph.Op

Custom extension of Graph.Op.

Extends

All Graph.Op methods

See also

Graph.Op

RGraph.Plot

Custom extension of Graph.Plot.

Extends

All Graph.Plot methods

See also

Graph.Plot

RGraph.Label

Custom extension of Graph.Label.  Contains custom Graph.Label.SVG, Graph.Label.HTML and Graph.Label.Native extensions.

Extends

All Graph.Label methods and subclasses.

See also

Graph.Label, Graph.Label.Native, Graph.Label.HTML, Graph.Label.SVG.

RGraph.Plot.NodeTypes

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.

Example

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
    }
  }
});

RGraph.Plot.EdgeTypes

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.

Example

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
    }
  }
});
refresh: function()
Computes positions and plots the tree.
plot: function()
Plots the RGraph.
onClick: function(id,
opt)
Animates the RGraph to center the node specified by id.
A radial graph visualization with advanced animations.
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.
Implements SVG labels.
Implements HTML labels.
Implements labels natively, using the Canvas text API.
Close