Graph.Op.js

Summary

Graph.Op.js
Graph.Op	Perform Graph operations like adding/removing Graph.Nodes or Graph.Adjacences, morphing a Graph into another Graph, contracting or expanding subtrees, etc.
Functions
removeNode	Removes one or more Graph.Nodes from the visualization.
removeEdge	Removes one or more Graph.Adjacences from the visualization.
sum	Adds a new graph to the visualization.
morph	This method will transform the current visualized graph into the new JSON representation passed in the method.
contract	Collapses the subtree of the given node.
expand	Expands the previously contracted subtree.

Graph.Op

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

Summary

Functions
removeNode	Removes one or more Graph.Nodes from the visualization.
removeEdge	Removes one or more Graph.Adjacences from the visualization.
sum	Adds a new graph to the visualization.
morph	This method will transform the current visualized graph into the new JSON representation passed in the method.
contract	Collapses the subtree of the given node.
expand	Expands the previously contracted subtree.

Functions

removeNode

removeNode: function( node,
opt )

Removes one or more Graph.Nodes from the visualization. It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.

Parameters

node	(string\|array) The node’s id. Can also be an array having many ids.
opt	(object) Animation options. It’s an object with optional properties described below
type	(string) Default’s nothing. Type of the animation. Can be “nothing”, “replot”, “fade:seq”, “fade:con” or “iter”.
duration	Described in Options.Fx.
fps	Described in Options.Fx.
transition	Described in Options.Fx.
hideLabels	(boolean) Default’s true. Hide labels during the animation.

Example

var viz = new $jit.Viz(options);
viz.op.removeNode('nodeId', {
  type: 'fade:seq',
  duration: 1000,
  hideLabels: false,
  transition: $jit.Trans.Quart.easeOut
});
//or also
viz.op.removeNode(['someId', 'otherId'], {
  type: 'fade:con',
  duration: 1500
});

removeEdge

removeEdge: function( vertex,
opt )

Removes one or more Graph.Adjacences from the visualization. It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.

Parameters

vertex	(array) An array having two strings which are the ids of the nodes connected by this edge (i.e [‘id1’, ‘id2’]). Can also be a two dimensional array holding many edges (i.e [[‘id1’, ‘id2’], [‘id3’, ‘id4’], ...]).
opt	(object) Animation options. It’s an object with optional properties described below
type	(string) Default’s nothing. Type of the animation. Can be “nothing”, “replot”, “fade:seq”, “fade:con” or “iter”.
duration	Described in Options.Fx.
fps	Described in Options.Fx.
transition	Described in Options.Fx.
hideLabels	(boolean) Default’s true. Hide labels during the animation.

Example

var viz = new $jit.Viz(options);
viz.op.removeEdge(['nodeId', 'otherId'], {
  type: 'fade:seq',
  duration: 1000,
  hideLabels: false,
  transition: $jit.Trans.Quart.easeOut
});
//or also
viz.op.removeEdge([['someId', 'otherId'], ['id3', 'id4']], {
  type: 'fade:con',
  duration: 1500
});

sum

sum: function( json,
opt )

Adds a new graph to the visualization. The JSON graph (or tree) must at least have a common node with the current graph plotted by the visualization. The resulting graph can be defined as follows http://mathworld.wolfram.com/GraphSum.html

Parameters

json	(object) A json tree or graph structure. See also Loader.loadJSON.
opt	(object) Animation options. It’s an object with optional properties described below
type	(string) Default’s nothing. Type of the animation. Can be “nothing”, “replot”, “fade:seq”, “fade:con”.
duration	Described in Options.Fx.
fps	Described in Options.Fx.
transition	Described in Options.Fx.
hideLabels	(boolean) Default’s true. Hide labels during the animation.

Example

//...json contains a tree or graph structure...

var viz = new $jit.Viz(options);
viz.op.sum(json, {
  type: 'fade:seq',
  duration: 1000,
  hideLabels: false,
  transition: $jit.Trans.Quart.easeOut
});
//or also
viz.op.sum(json, {
  type: 'fade:con',
  duration: 1500
});

morph

morph: function( json,
opt,
extraModes )

This method will transform the current visualized graph into the new JSON representation passed in the method. The JSON object must at least have the root node in common with the current visualized graph.

Parameters

json	(object) A json tree or graph structure. See also Loader.loadJSON.
opt	(object) Animation options. It’s an object with optional properties described below
type	(string) Default’s nothing. Type of the animation. Can be “nothing”, “replot”, “fade:con”.
duration	Described in Options.Fx.
fps	Described in Options.Fx.
transition	Described in Options.Fx.
hideLabels	(boolean) Default’s true. Hide labels during the animation.
id	(string) The shared Graph.Node id between both graphs.
extraModes	(optional\|object) When morphing with an animation, dollar prefixed data parameters are added to endData and not data itself. This way you can animate dollar prefixed parameters during your morphing operation. For animating these extra-parameters you have to specify an object that has animation groups as keys and animation properties as values, just like specified in Graph.Plot.animate.

Example

//...json contains a tree or graph structure...

var viz = new $jit.Viz(options);
viz.op.morph(json, {
  type: 'fade',
  duration: 1000,
  hideLabels: false,
  transition: $jit.Trans.Quart.easeOut
});
//or also
viz.op.morph(json, {
  type: 'fade',
  duration: 1500
});
//if the json data contains dollar prefixed params
//like $width or $height these too can be animated
viz.op.morph(json, {
  type: 'fade',
  duration: 1500
}, {
  'node-property': ['width', 'height']
});

contract

contract: function( node,
opt )

Collapses the subtree of the given node. The node will have a collapsed=true property.

Parameters

node	(object) A Graph.Node.
opt	(object) An object containing options described below
type	(string) Whether to ‘replot’ or ‘animate’ the contraction.

There are also a number of Animation options. For more information see Options.Fx.

Example

var viz = new $jit.Viz(options);
viz.op.contract(node, {
  type: 'animate',
  duration: 1000,
  hideLabels: true,
  transition: $jit.Trans.Quart.easeOut
});

expand

expand: function( node,
opt )

Expands the previously contracted subtree. The given node must have the collapsed=true property.

Parameters

node	(object) A Graph.Node.
opt	(object) An object containing options described below
type	(string) Whether to ‘replot’ or ‘animate’.

There are also a number of Animation options. For more information see Options.Fx.

Example

var viz = new $jit.Viz(options);
viz.op.expand(node, {
  type: 'animate',
  duration: 1000,
  hideLabels: true,
  transition: $jit.Trans.Quart.easeOut
});