Graph.Plot.js

Summary
Graph.Plot.js
Graph.PlotGraph rendering and animation methods.
Functions
animateAnimates a Graph by interpolating some Graph.Node, Graph.Adjacence or Graph.Label properties.
plotPlots a Graph.
plotNodePlots a Graph.Node.
plotLinePlots a Graph.Adjacence.
Graph.Plot3DGraph 3D rendering and animation methods.

Graph.Plot

Graph rendering and animation methods.

Properties

nodeHelperNodeHelper object.
edgeHelperEdgeHelper object.
Summary
Functions
animateAnimates a Graph by interpolating some Graph.Node, Graph.Adjacence or Graph.Label properties.
plotPlots a Graph.
plotNodePlots a Graph.Node.
plotLinePlots a Graph.Adjacence.

Functions

animate

animate: function(opt,
versor)

Animates a Graph by interpolating some Graph.Node, Graph.Adjacence or Graph.Label properties.

Parameters

opt(object) Animation options.  The object properties are described below
duration(optional) Described in Options.Fx.
fps(optional) Described in Options.Fx.
hideLabels(optional|boolean) Whether to hide labels during the animation.
modes(required|object) An object with animation modes (described below).

Animation modes

Animation modes are strings representing different node/edge and graph properties that you’d like to animate.  They are represented by an object that has as keys main categories of properties to animate and as values a list of these specific properties.  The properties are described below

positionDescribes the way nodes’ positions must be interpolated.  Possible values are ‘linear’, ‘polar’ or ‘moebius’.
node-propertyDescribes which Node properties will be interpolated.  These properties can be any of the ones defined in Options.Node.
edge-propertyDescribes which Edge properties will be interpolated.  These properties can be any the ones defined in Options.Edge.
label-propertyDescribes which Label properties will be interpolated.  These properties can be any of the ones defined in Options.Label like color or size.
node-styleDescribes which Node Canvas Styles will be interpolated.  These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc.
edge-styleDescribes which Edge Canvas Styles will be interpolated.  These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc.

Example

var viz = new $jit.Viz(options);
//...tweak some Data, CanvasStyles or LabelData properties...
viz.fx.animate({
  modes: {
    'position': 'linear',
    'node-property': ['width', 'height'],
    'node-style': 'shadowColor',
    'label-property': 'size'
  },
  hideLabels: false
});
//...can also be written like this...
viz.fx.animate({
  modes: ['linear',
          'node-property:width:height',
          'node-style:shadowColor',
          'label-property:size'],
  hideLabels: false
});

plot

plot: function(opt,
animating)

Plots a Graph.

Parameters

opt(optional) Plotting options.  Most of them are described in Options.Fx.

Example

var viz = new $jit.Viz(options);
viz.fx.plot();

plotNode

plotNode: function(node,
canvas,
animating)

Plots a Graph.Node.

Parameters

node(object) A Graph.Node.
canvas(object) A Canvas element.

plotLine

plotLine: function(adj,
canvas,
animating)

Plots a Graph.Adjacence.

Parameters

adj(object) A Graph.Adjacence.
canvas(object) A Canvas instance.

Graph.Plot3D

Graph 3D rendering and animation methods.

Properties

nodeHelperNodeHelper object.
edgeHelperEdgeHelper object.
A Graph Class that provides useful manipulation functions.
animate: function(opt,
versor)
Animates a Graph by interpolating some Graph.Node, Graph.Adjacence or Graph.Label properties.
A Graph node.
A Graph adjacence (or edge) connecting two Graph.Nodes.
An interface for plotting/hiding/showing labels.
plot: function(opt,
animating)
Plots a Graph.
plotNode: function(node,
canvas,
animating)
Plots a Graph.Node.
plotLine: function(adj,
canvas,
animating)
Plots a Graph.Adjacence.
Contains rendering and other type of primitives for simple shapes.
Contains rendering primitives for simple edge shapes.
Provides animation options like duration of the animations, frames per second and animation transitions.
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.
A canvas widget used by all visualizations.
Close