| Graph.js | |
| Graph | A Graph Class that provides useful manipulation functions. |
| Functions | |
| getNode | Returns a Graph.Node by id. |
| get | An alias for Graph.Util.getNode. |
| getByName | Returns a Graph.Node by name. |
| getAdjacence | Returns a Graph.Adjacence object connecting nodes with ids id and id2. |
| addNode | Adds a node. |
| addAdjacence | Connects nodes specified by obj and obj2. |
| removeNode | Removes a Graph.Node matching the specified id. |
| removeAdjacence | Removes a Graph.Adjacence matching id1 and id2. |
| hasNode | Returns a boolean indicating if the node belongs to the Graph or not. |
| empty | Empties the Graph |
| Accessors | Defines a set of methods for data, canvas and label styles manipulation implemented by Graph.Node and Graph.Adjacence instances. |
| Functions | |
| getData | Returns the specified data value property. |
| setData | Sets the current data property with some specific value. |
| setDataset | Convenience method to set multiple data values at once. |
| removeData | Remove data properties. |
| getCanvasStyle | Returns the specified canvas style data value property. |
| setCanvasStyle | Sets the canvas style data property with some specific value. |
| setCanvasStyles | Convenience method to set multiple styles at once. |
| removeCanvasStyle | Remove canvas style properties from data. |
| getLabelData | Returns the specified label data value property. |
| setLabelData | Sets the current label data with some specific value. |
| setLabelDataset | Convenience function to set multiple label data at once. |
| removeLabelData | Remove label properties from data. |
| Graph.Node | A Graph node. |
| Functions | |
| adjacentTo | Indicates if the node is adjacent to the node specified by id |
| getAdjacency | Returns a Graph.Adjacence object connecting the current Graph.Node and the node having id as id. |
| getPos | Returns the position of the node. |
| setPos | Sets the node’s position. |
| Graph. | A Graph adjacence (or edge) connecting two Graph.Nodes. |
| Graph.Util | Graph traversal and processing utility object. |
| Functions | |
| getNode | Returns a Graph.Node by id. |
| eachNode | Iterates over Graph nodes performing an action. |
| each | Iterates over Graph nodes performing an action. |
| eachAdjacency | Iterates over Graph.Node adjacencies applying the action function. |
| computeLevels | Performs a BFS traversal setting the correct depth for each node. |
| eachBFS | Performs a BFS traversal applying action to each Graph.Node. |
| eachLevel | Iterates over a node’s subgraph applying action to the nodes of relative depth between levelBegin and levelEnd. |
| eachSubgraph | Iterates over a node’s children recursively. |
| eachSubnode | Iterates over a node’s children (without deeper recursion). |
| anySubnode | Returns true if any subnode matches the given condition. |
| getSubnodes | Collects all subnodes for a specified node. |
| getParents | Returns an Array of Graph.Nodes which are parents of the given node. |
| isDescendantOf | Returns a boolean indicating if some node is descendant of the node with the given id. |
| clean | Cleans flags from nodes. |
| getClosestNodeToOrigin | Returns the closest node to the center of canvas. |
| getClosestNodeToPos | Returns the closest node to the given position. |
A Graph Class that provides useful manipulation functions. You can find more manipulation methods in the Graph.Util object.
An instance of this class can be accessed by using the graph parameter of any tree or graph visualization.
//create new visualization var viz = new $jit.Viz(options); //load JSON data viz.loadJSON(json); //access model viz.graph; //<Graph> instance
The following Graph.Util methods are implemented in Graph
| Functions | |
| getNode | Returns a Graph.Node by id. |
| get | An alias for Graph.Util.getNode. |
| getByName | Returns a Graph.Node by name. |
| getAdjacence | Returns a Graph.Adjacence object connecting nodes with ids id and id2. |
| addNode | Adds a node. |
| addAdjacence | Connects nodes specified by obj and obj2. |
| removeNode | Removes a Graph.Node matching the specified id. |
| removeAdjacence | Removes a Graph.Adjacence matching id1 and id2. |
| hasNode | Returns a boolean indicating if the node belongs to the Graph or not. |
| empty | Empties the Graph |
getNode: function( id )
Returns a Graph.Node by id.
| id | (string) A Graph.Node id. |
var node = graph.getNode('nodeId');
get: function( id )
An alias for Graph.Util.getNode. Returns a node by id.
| id | (string) A Graph.Node id. |
var node = graph.get('nodeId');
getByName: function( name )
Returns a Graph.Node by name.
| name | (string) A Graph.Node name. |
var node = graph.getByName('someName');
getAdjacence: function ( id, id2 )
Returns a Graph.Adjacence object connecting nodes with ids id and id2.
| id | (string) A Graph.Node id. |
| id2 | (string) A Graph.Node id. |
addAdjacence: function ( obj, obj2, data )
Connects nodes specified by obj and obj2. If not found, nodes are created.
| obj | (object) A Graph.Node object. |
| obj2 | (object) Another Graph.Node object. |
| data | (object) A data object. Used to store some extra information in the Graph.Adjacence object created. |
removeNode: function( id )
Removes a Graph.Node matching the specified id.
| id | (string) A node’s id. |
removeAdjacence: function( id1, id2 )
Removes a Graph.Adjacence matching id1 and id2.
| id1 | (string) A Graph.Node id. |
| id2 | (string) A Graph.Node id. |
hasNode: function( id )
Returns a boolean indicating if the node belongs to the Graph or not.
| id | (string) Node id. |
Defines a set of methods for data, canvas and label styles manipulation implemented by Graph.Node and Graph.Adjacence instances.
| Functions | |
| getData | Returns the specified data value property. |
| setData | Sets the current data property with some specific value. |
| setDataset | Convenience method to set multiple data values at once. |
| removeData | Remove data properties. |
| getCanvasStyle | Returns the specified canvas style data value property. |
| setCanvasStyle | Sets the canvas style data property with some specific value. |
| setCanvasStyles | Convenience method to set multiple styles at once. |
| removeCanvasStyle | Remove canvas style properties from data. |
| getLabelData | Returns the specified label data value property. |
| setLabelData | Sets the current label data with some specific value. |
| setLabelDataset | Convenience function to set multiple label data at once. |
| removeLabelData | Remove label properties from data. |
getData: function( prop, type, force )
Returns the specified data value property. This is useful for querying special/reserved Graph.Node data properties (i.e dollar prefixed properties).
| prop | (string) The name of the property. The dollar sign is not needed. For example getData(width) will return data.$width. |
| type | (string) The type of the data property queried. Default’s “current”. You can access start and end data properties also. These properties are used when making animations. |
| force | (boolean) Whether to obtain the true value of the property (equivalent to data.$prop) or to check for node.overridable = true first. |
The value of the dollar prefixed property or the global Node/Edge property value if overridable=false
node.getData('width'); //will return node.data.$width if Node.overridable=true;
setData: function( prop, value, type )
Sets the current data property with some specific value. This method is only useful for reserved (dollar prefixed) properties.
| prop | (string) The name of the property. The dollar sign is not necessary. For example setData(width) will set data.$width. |
| value | (mixed) The value to store. |
| type | (string) The type of the data property to store. Default’s “current” but can also be “start” or “end”. |
node.setData('width', 30);If we were to make an animation of a node/edge width then we could do
var node = viz.getNode('nodeId');
//set start and end values
node.setData('width', 10, 'start');
node.setData('width', 30, 'end');
//will animate nodes width property
viz.fx.animate({
modes: ['node-property:width'],
duration: 1000
});
setDataset: function( types, obj )
Convenience method to set multiple data values at once.
| types | (array|string) A set of ‘current’, ‘end’ or ‘start’ values. |
| obj | (object) A hash containing the names and values of the properties to be altered. |
node.setDataset(['current', 'end'], {
'width': [100, 5],
'color': ['#fff', '#ccc']
});
//...or also
node.setDataset('end', {
'width': 5,
'color': '#ccc'
});
getCanvasStyle: function( prop, type, force )
Returns the specified canvas style data value property. This is useful for querying special/reserved Graph.Node canvas style data properties (i.e. dollar prefixed properties that match with $canvas-<name of canvas style>).
| prop | (string) The name of the property. The dollar sign is not needed. For example getCanvasStyle(shadowBlur) will return data[$canvas-shadowBlur]. |
| type | (string) The type of the data property queried. Default’s current. You can access start and end data properties also. |
node.getCanvasStyle('shadowBlur');
setCanvasStyle: function( prop, value, type )
Sets the canvas style data property with some specific value. This method is only useful for reserved (dollar prefixed) properties.
| prop | (string) Name of the property. Can be any canvas property like ‘shadowBlur’, ‘shadowColor’, ‘strokeStyle’, etc. |
| value | (mixed) The value to set to the property. |
| type | (string) Default’s current. Whether to set start, current or end type properties. |
node.setCanvasStyle('shadowBlur', 30);If we were to make an animation of a node/edge shadowBlur canvas style then we could do
var node = viz.getNode('nodeId');
//set start and end values
node.setCanvasStyle('shadowBlur', 10, 'start');
node.setCanvasStyle('shadowBlur', 30, 'end');
//will animate nodes canvas style property for nodes
viz.fx.animate({
modes: ['node-style:shadowBlur'],
duration: 1000
});
getLabelData: function( prop, type, force )
Returns the specified label data value property. This is useful for querying special/reserved Graph.Node label options (i.e. dollar prefixed properties that match with $label-<name of label style>).
| prop | (string) The name of the property. The dollar sign prefix is not needed. For example getLabelData(size) will return data[$label-size]. |
| type | (string) The type of the data property queried. Default’s current. You can access start and end data properties also. |
setLabelData: function( prop, value, type )
Sets the current label data with some specific value. This method is only useful for reserved (dollar prefixed) properties.
| prop | (string) Name of the property. Can be any canvas property like ‘shadowBlur’, ‘shadowColor’, ‘strokeStyle’, etc. |
| value | (mixed) The value to set to the property. |
| type | (string) Default’s current. Whether to set start, current or end type properties. |
node.setLabelData('size', 30);If we were to make an animation of a node label size then we could do
var node = viz.getNode('nodeId');
//set start and end values
node.setLabelData('size', 10, 'start');
node.setLabelData('size', 30, 'end');
//will animate nodes label size
viz.fx.animate({
modes: ['label-property:size'],
duration: 1000
});A Graph node.
Accessors methods.
The following Graph.Util methods are implemented by Graph.Node
| Functions | |
| adjacentTo | Indicates if the node is adjacent to the node specified by id |
| getAdjacency | Returns a Graph.Adjacence object connecting the current Graph.Node and the node having id as id. |
| getPos | Returns the position of the node. |
| setPos | Sets the node’s position. |
getAdjacency: function( id )
Returns a Graph.Adjacence object connecting the current Graph.Node and the node having id as id.
| id | (string) A node id. |
A Graph adjacence (or edge) connecting two Graph.Nodes.
Accessors methods.
| nodeFrom | A Graph.Node connected by this edge. |
| nodeTo | Another Graph.Node connected by this edge. |
| data | Node data property containing a hash (i.e {}) with custom options. |
Graph traversal and processing utility object.
For your convenience some of these methods have also been appended to Graph and Graph.Node classes.
| Functions | |
| getNode | Returns a Graph.Node by id. |
| eachNode | Iterates over Graph nodes performing an action. |
| each | Iterates over Graph nodes performing an action. |
| eachAdjacency | Iterates over Graph.Node adjacencies applying the action function. |
| computeLevels | Performs a BFS traversal setting the correct depth for each node. |
| eachBFS | Performs a BFS traversal applying action to each Graph.Node. |
| eachLevel | Iterates over a node’s subgraph applying action to the nodes of relative depth between levelBegin and levelEnd. |
| eachSubgraph | Iterates over a node’s children recursively. |
| eachSubnode | Iterates over a node’s children (without deeper recursion). |
| anySubnode | Returns true if any subnode matches the given condition. |
| getSubnodes | Collects all subnodes for a specified node. |
| getParents | Returns an Array of Graph.Nodes which are parents of the given node. |
| isDescendantOf | Returns a boolean indicating if some node is descendant of the node with the given id. |
| clean | Cleans flags from nodes. |
| getClosestNodeToOrigin | Returns the closest node to the center of canvas. |
| getClosestNodeToPos | Returns the closest node to the given position. |
getNode: function( graph, id )
Returns a Graph.Node by id.
| graph | (object) A Graph instance. |
| id | (string) A Graph.Node id. |
$jit.Graph.Util.getNode(graph, 'nodeid');
//or...
graph.getNode('nodeid');
eachNode: function( graph, action, flags )
Iterates over Graph nodes performing an action.
| graph | (object) A Graph instance. |
| action | (function) A callback function having a Graph.Node as first formal parameter. |
$jit.Graph.Util.eachNode(graph, function(node) {
alert(node.name);
});
//or...
graph.eachNode(function(node) {
alert(node.name);
});
each: function( graph, action, flags )
Iterates over Graph nodes performing an action. It’s an alias for Graph.Util.eachNode.
| graph | (object) A Graph instance. |
| action | (function) A callback function having a Graph.Node as first formal parameter. |
$jit.Graph.Util.each(graph, function(node) {
alert(node.name);
});
//or...
graph.each(function(node) {
alert(node.name);
});
eachAdjacency: function( node, action, flags )
Iterates over Graph.Node adjacencies applying the action function.
| node | (object) A Graph.Node. |
| action | (function) A callback function having Graph.Adjacence as first formal parameter. |
$jit.Graph.Util.eachAdjacency(node, function(adj) {
alert(adj.nodeTo.name);
});
//or...
node.eachAdjacency(function(adj) {
alert(adj.nodeTo.name);
});
computeLevels: function( graph, id, startDepth, flags )
Performs a BFS traversal setting the correct depth for each node.
The depth of each node can then be accessed by
node._depth
| graph | (object) A Graph. |
| id | (string) A starting node id for the BFS traversal. |
| startDepth | (optional|number) A minimum depth value. Default’s 0. |
eachBFS: function( graph, id, action, flags )
Performs a BFS traversal applying action to each Graph.Node.
| graph | (object) A Graph. |
| id | (string) A starting node id for the BFS traversal. |
| action | (function) A callback function having a Graph.Node as first formal parameter. |
$jit.Graph.Util.eachBFS(graph, 'mynodeid', function(node) {
alert(node.name);
});
//or...
graph.eachBFS('mynodeid', function(node) {
alert(node.name);
});
eachLevel: function( node, levelBegin, levelEnd, action, flags )
Iterates over a node’s subgraph applying action to the nodes of relative depth between levelBegin and levelEnd.
| node | (object) A Graph.Node. |
| levelBegin | (number) A relative level value. |
| levelEnd | (number) A relative level value. |
| action | (function) A callback function having a Graph.Node as first formal parameter. |
eachSubgraph: function( node, action, flags )
Iterates over a node’s children recursively.
| node | (object) A Graph.Node. |
| action | (function) A callback function having a Graph.Node as first formal parameter. |
$jit.Graph.Util.eachSubgraph(node, function(node) {
alert(node.name);
});
//or...
node.eachSubgraph(function(node) {
alert(node.name);
});
eachSubnode: function( node, action, flags )
Iterates over a node’s children (without deeper recursion).
| node | (object) A Graph.Node. |
| action | (function) A callback function having a Graph.Node as first formal parameter. |
$jit.Graph.Util.eachSubnode(node, function(node) {
alert(node.name);
});
//or...
node.eachSubnode(function(node) {
alert(node.name);
});
anySubnode: function( node, cond, flags )
Returns true if any subnode matches the given condition.
| node | (object) A Graph.Node. |
| cond | (function) A callback function returning a Boolean instance. This function has as first formal parameter a Graph.Node. |
$jit.Graph.Util.anySubnode(node, function(node) { return node.name == "mynodename"; });
//or...
node.anySubnode(function(node) { return node.name == 'mynodename'; });
getSubnodes: function( node, level, flags )
Collects all subnodes for a specified node. The level parameter filters nodes having relative depth of level from the root node.
| node | (object) A Graph.Node. |
| level | (optional|number) Default’s 0. A starting relative depth for collecting nodes. |
An array of nodes.
getParents: function( node )
Returns an Array of Graph.Nodes which are parents of the given node.
| node | (object) A Graph.Node. |
An Array of Graph.Nodes.
var pars = $jit.Graph.Util.getParents(node);
//or...
var pars = node.getParents();
if(pars.length > 0) {
//do stuff with parents
}
isDescendantOf: function( node, id )
Returns a boolean indicating if some node is descendant of the node with the given id.
| node | (object) A Graph.Node. |
| id | (string) A Graph.Node id. |
$jit.Graph.Util.isDescendantOf(node, "nodeid"); //true|false
//or...
node.isDescendantOf('nodeid');//true|false
getClosestNodeToOrigin: function( graph, prop, flags )
Returns the closest node to the center of canvas.
| graph | (object) A Graph instance. |
| prop | (optional|string) Default’s ‘current’. A Graph.Node position property. Possible properties are ‘start’, ‘current’ or ‘end’. |
getClosestNodeToPos: function( graph, pos, prop, flags )
Returns the closest node to the given position.
| graph | (object) A Graph instance. |
| pos | (object) A Complex or Polar instance. |
| prop | (optional|string) Default’s current. A Graph.Node position property. Possible properties are ‘start’, ‘current’ or ‘end’. |
Returns a Graph.Node by id.
getNode: function( id )
An alias for Graph.Util.getNode.
get: function( id )
Returns a Graph.Node by id.
getNode: function( graph, id )
Returns a Graph.Node by name.
getByName: function( name )
Returns a Graph.Adjacence object connecting nodes with ids id and id2.
getAdjacence: function ( id, id2 )
Adds a node.
addNode: function( obj )
Connects nodes specified by obj and obj2.
addAdjacence: function ( obj, obj2, data )
Removes a Graph.Node matching the specified id.
removeNode: function( id )
Removes a Graph.Adjacence matching id1 and id2.
removeAdjacence: function( id1, id2 )
Returns a boolean indicating if the node belongs to the Graph or not.
hasNode: function( id )
Empties the Graph
empty: function()
Returns the specified data value property.
getData: function( prop, type, force )
Sets the current data property with some specific value.
setData: function( prop, value, type )
Convenience method to set multiple data values at once.
setDataset: function( types, obj )
Remove data properties.
removeData: function()
Returns the specified canvas style data value property.
getCanvasStyle: function( prop, type, force )
Sets the canvas style data property with some specific value.
setCanvasStyle: function( prop, value, type )
Convenience method to set multiple styles at once.
setCanvasStyles: function( types, obj )
Remove canvas style properties from data.
removeCanvasStyle: function()
Returns the specified label data value property.
getLabelData: function( prop, type, force )
Sets the current label data with some specific value.
setLabelData: function( prop, value, type )
Convenience function to set multiple label data at once.
setLabelDataset: function( types, obj )
Remove label properties from data.
removeLabelData: function()
Indicates if the node is adjacent to the node specified by id
adjacentTo: function( node )
Returns a Graph.Adjacence object connecting the current Graph.Node and the node having id as id.
getAdjacency: function( id )
Returns the position of the node.
getPos: function( type )
Sets the node’s position.
setPos: function( value, type )
Iterates over Graph nodes performing an action.
eachNode: function( graph, action, flags )
Iterates over Graph nodes performing an action.
each: function( graph, action, flags )
Iterates over Graph.Node adjacencies applying the action function.
eachAdjacency: function( node, action, flags )
Performs a BFS traversal setting the correct depth for each node.
computeLevels: function( graph, id, startDepth, flags )
Performs a BFS traversal applying action to each Graph.Node.
eachBFS: function( graph, id, action, flags )
Iterates over a node’s subgraph applying action to the nodes of relative depth between levelBegin and levelEnd.
eachLevel: function( node, levelBegin, levelEnd, action, flags )
Iterates over a node’s children recursively.
eachSubgraph: function( node, action, flags )
Iterates over a node’s children (without deeper recursion).
eachSubnode: function( node, action, flags )
Returns true if any subnode matches the given condition.
anySubnode: function( node, cond, flags )
Collects all subnodes for a specified node.
getSubnodes: function( node, level, flags )
Returns an Array of Graph.Nodes which are parents of the given node.
getParents: function( node )
Returns a boolean indicating if some node is descendant of the node with the given id.
isDescendantOf: function( node, id )
Cleans flags from nodes.
clean: function( graph )
Returns the closest node to the center of canvas.
getClosestNodeToOrigin: function( graph, prop, flags )
Returns the closest node to the given position.
getClosestNodeToPos: function( graph, pos, prop, flags )