Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Documentation

  • Loading branch information...
commit ea8e451b8c9960b169bf4bb433b0174da96d5041 1 parent 976cdbd
@philogb authored
View
640 Source/Graph/Graph.js
@@ -1,49 +1,42 @@
/*
* File: Graph.js
*
- * Generic <Graph>, <Graph.Node> and <Graph.Adjacence> classes.
- *
- * Used by:
- *
- * <Hypertree>, <RGraph> and <ST>.
- *
*/
/*
Class: Graph
- A generic Graph class.
-
- Description:
-
- When a json graph/tree structure is loaded by <Loader.loadJSON>, an internal <Graph> representation is created.
-
- In most cases you'll be dealing with an already created <Graph> structure, so methods like <Graph.addNode> or <Graph.addAdjacence> won't
- be of many use. However methods like <Graph.getNode> and <Graph.hasNode> are pretty useful.
-
- <Graph.Util> provides also iterators for <Graphs> and advanced and useful graph operations and methods.
-
- Used by:
-
- <Loader.loadJSON>, <Hypertree>, <RGraph> and <ST>.
-
- Access:
-
- An instance of this class can be accessed by using the _graph_ parameter of a <Hypertree>, <RGraph> or <ST> instance
+ 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.
+
Example:
(start code js)
- var st = new ST(canvas, config);
- st.graph.getNode //or any other <Graph> method.
-
- var ht = new Hypertree(canvas, config);
- ht.graph.getNode //or any other <Graph> method.
-
- var rg = new RGraph(canvas, config);
- rg.graph.getNode //or any other <Graph> method.
+ //create new visualization
+ var viz = new $jit.Viz(options);
+ //load JSON data
+ viz.loadJSON(json);
+ //access model
+ viz.graph; //<Graph> instance
(end code)
+ Implements:
+
+ The following <Graph.Util> methods are implemented in <Graph>
+
+ - <Graph.Util.getNode>
+ - <Graph.Util.eachNode>
+ - <Graph.Util.computeLevels>
+ - <Graph.Util.eachBFS>
+ - <Graph.Util.clean>
+ - <Graph.Util.getClosestNodeToPos>
+ - <Graph.Util.getClosestNodeToOrigin>
+
+ See also:
+
+ <Graph.Util>.
+
*/
$jit.Graph = new Class({
@@ -79,20 +72,16 @@ $jit.Graph = new Class({
/*
Method: getNode
- Returns a <Graph.Node> by _id_.
+ Returns a <Graph.Node> by *id*.
Parameters:
- id - A <Graph.Node> id.
-
- Returns:
-
- A <Graph.Node> having _id_ as id. Returns *false* otherwise.
+ id - (string) A <Graph.Node> id.
Example:
(start code js)
- var node = graph.getNode('someid');
+ var node = graph.getNode('nodeId');
(end code)
*/
getNode: function(id) {
@@ -103,15 +92,11 @@ $jit.Graph = new Class({
/*
Method: getByName
- Returns a <Graph.Node> by _name_.
+ Returns a <Graph.Node> by *name*.
Parameters:
- name - A <Graph.Node> name.
-
- Returns:
-
- A <Graph.Node> having _name_ as name. Returns *false* otherwise.
+ name - (string) A <Graph.Node> name.
Example:
@@ -128,18 +113,14 @@ $jit.Graph = new Class({
},
/*
- Method: getAdjacence
-
- Returns an array of <Graph.Adjacence> objects connecting nodes with ids _id_ and _id2_.
-
- Parameters:
-
- id - A <Graph.Node> id.
- id2 - A <Graph.Node> id.
+ Method: getAdjacence
+
+ Returns a <Graph.Adjacence> object connecting nodes with ids *id* and *id2*.
- Returns:
+ Parameters:
- A <Graph.Adjacence>.
+ id - (string) A <Graph.Node> id.
+ id2 - (string) A <Graph.Node> id.
*/
getAdjacence: function (id, id2) {
if(id in this.edges) {
@@ -155,11 +136,11 @@ $jit.Graph = new Class({
Parameters:
- obj - An object containing as properties
+ obj - An object with the properties described below
- - _id_ node's id
- - _name_ node's name
- - _data_ node's data hash
+ id - (string) A node id
+ name - (string) A node's name
+ data - (object) A node's data hash
See also:
<Graph.Node>
@@ -185,13 +166,13 @@ $jit.Graph = new Class({
/*
Method: addAdjacence
- Connects nodes specified by _obj_ and _obj2_. If not found, nodes are created.
+ Connects nodes specified by *obj* and *obj2*. If not found, nodes are created.
Parameters:
- obj - a <Graph.Node> object.
- obj2 - Another <Graph.Node> object.
- data - A DataSet object. Used to store some extra information in the <Graph.Adjacence> object 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.
See also:
@@ -210,11 +191,11 @@ $jit.Graph = new Class({
/*
Method: removeNode
- Removes a <Graph.Node> matching the specified _id_.
+ Removes a <Graph.Node> matching the specified *id*.
Parameters:
- id - A node's id.
+ id - (string) A node's id.
*/
removeNode: function(id) {
@@ -231,12 +212,12 @@ $jit.Graph = new Class({
/*
Method: removeAdjacence
- Removes a <Graph.Adjacence> matching _id1_ and _id2_.
+ Removes a <Graph.Adjacence> matching *id1* and *id2*.
Parameters:
- id1 - A <Graph.Node> id.
- id2 - A <Graph.Node> id.
+ id1 - (string) A <Graph.Node> id.
+ id2 - (string) A <Graph.Node> id.
*/
removeAdjacence: function(id1, id2) {
delete this.edges[id1][id2];
@@ -246,15 +227,11 @@ $jit.Graph = new Class({
/*
Method: hasNode
- Returns a Boolean instance indicating if the node belongs to the <Graph> or not.
+ Returns a boolean indicating if the node belongs to the <Graph> or not.
Parameters:
- id - Node id.
-
- Returns:
-
- A Boolean instance indicating if the node belongs to the graph or not.
+ id - (string) Node id.
*/
hasNode: function(id) {
return id in this.nodes;
@@ -272,6 +249,12 @@ $jit.Graph = new Class({
var Graph = $jit.Graph;
+/*
+ Object: Accessors
+
+ Defines a set of methods for data, canvas and label styles manipulation implemented by <Graph.Node> and <Graph.Adjacence> instances.
+
+ */
var Accessors;
(function () {
@@ -339,18 +322,17 @@ var Accessors;
Parameters:
- prop - The name of the property. The dollar sign is not necessary. For
- example _getData('width')_ will query _data.$width_
- type - The type of the data property queried. Default's "current".
- force - Whether to obtain the true value of the property (equivalent to
- _data.$prop_) or to check for _node.overridable=true_ first. For
- more information about _node.overridable_ please check the
- <Options.Node> and <Options.Edge> sections.
+ 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.
Returns:
- The value of the dollar prefixed property or the global Node property
- value if _overridable=false_
+ The value of the dollar prefixed property or the global Node/Edge property
+ value if *overridable=false*
Example:
(start code js)
@@ -366,20 +348,35 @@ var Accessors;
Method: setData
Sets the current data property with some specific value.
- This method is only useful for (dollar prefixed) reserved properties.
+ This method is only useful for reserved (dollar prefixed) properties.
Parameters:
- prop - The name of the property. The dollar sign is not necessary. For
- example _setData('width')_ will set _data.$width_.
- value - The value to store.
- type - The type of the data property to store. Default's "current" but
- can also be "begin" or "end".
+ 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".
Example:
+
(start code js)
node.setData('width', 30);
(end code)
+
+ If we were to make an animation of a node/edge width then we could do
+
+ (start code js)
+ 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
+ });
+ (end code)
*/
setData: function(prop, value, type) {
setDataInternal.call(this, "", prop, value, type);
@@ -389,6 +386,11 @@ var Accessors;
Method: setDataset
Convenience method to set multiple data values at once.
+
+ Parameters:
+
+ 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.
Example:
(start code js)
@@ -402,6 +404,11 @@ var Accessors;
'color': '#ccc'
});
(end code)
+
+ See also:
+
+ <Accessors.setData>
+
*/
setDataset: function(types, obj) {
types = $.splat(types);
@@ -415,11 +422,11 @@ var Accessors;
/*
Method: removeData
- Remove properties from data.
+ Remove data properties.
Parameters:
- One or more property names as arguments. The dollar sign is not necessary.
+ One or more property names as arguments. The dollar sign is not needed.
Example:
(start code js)
@@ -437,7 +444,21 @@ var Accessors;
querying special/reserved <Graph.Node> canvas style data properties (i.e.
dollar prefixed properties that match with $canvas-<name of canvas style>).
- See <getData> for more details.
+ Parameters:
+
+ 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.
+
+ Example:
+ (start code js)
+ node.getCanvasStyle('shadowBlur');
+ (end code)
+
+ See also:
+
+ <Accessors.getData>
*/
getCanvasStyle: function(prop, type, force) {
return getDataInternal.call(
@@ -447,10 +468,38 @@ var Accessors;
/*
Method: setCanvasStyle
- Sets the current canvas style prefixed data property with some specific value.
- This method is only useful for (dollar prefixed) reserved properties.
-
- See <setData> for more details.
+ Sets the canvas style data property with some specific value.
+ This method is only useful for reserved (dollar prefixed) properties.
+
+ Parameters:
+
+ 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.
+
+ Example:
+
+ (start code js)
+ node.setCanvasStyle('shadowBlur', 30);
+ (end code)
+
+ If we were to make an animation of a node/edge shadowBlur canvas style then we could do
+
+ (start code js)
+ 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
+ });
+ (end code)
+
+ See also:
+
+ <Accessors.setData>.
*/
setCanvasStyle: function(prop, value, type) {
setDataInternal.call(this, 'canvas', prop, value, type);
@@ -459,9 +508,16 @@ var Accessors;
/*
Method: setCanvasStyles
- Convenience function to set multiple styles at once.
+ Convenience method to set multiple styles at once.
+
+ Parameters:
+
+ 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.
- See <setDataset> for more details.
+ See also:
+
+ <Accessors.setDataset>.
*/
setCanvasStyles: function(types, obj) {
types = $.splat(types);
@@ -477,7 +533,13 @@ var Accessors;
Remove canvas style properties from data.
- See <removeData> for more details.
+ Parameters:
+
+ A variable number of canvas style strings.
+
+ See also:
+
+ <Accessors.removeData>.
*/
removeCanvasStyle: function() {
removeDataInternal.call(this, 'canvas', Array.prototype.slice.call(arguments));
@@ -488,9 +550,18 @@ var Accessors;
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 $canvas-<name of canvas style>).
+ dollar prefixed properties that match with $label-<name of label style>).
+
+ Parameters:
- See <getData> for more details.
+ 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.
+
+ See also:
+
+ <Accessors.getData>.
*/
getLabelData: function(prop, type, force) {
return getDataInternal.call(
@@ -500,10 +571,38 @@ var Accessors;
/*
Method: setLabelData
- Sets the current label prefixed data property with some specific value.
- This method is only useful for (dollar prefixed) reserved properties.
+ Sets the current label data with some specific value.
+ This method is only useful for reserved (dollar prefixed) properties.
- See <setData> for more details.
+ Parameters:
+
+ 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.
+
+ Example:
+
+ (start code js)
+ node.setLabelData('size', 30);
+ (end code)
+
+ If we were to make an animation of a node label size then we could do
+
+ (start code js)
+ 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
+ });
+ (end code)
+
+ See also:
+
+ <Accessors.setData>.
*/
setLabelData: function(prop, value, type) {
setDataInternal.call(this, 'label', prop, value, type);
@@ -514,7 +613,14 @@ var Accessors;
Convenience function to set multiple label data at once.
- See <setDataset> for more details.
+ Parameters:
+
+ 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.
+
+ See also:
+
+ <Accessors.setDataset>.
*/
setLabelDataset: function(types, obj) {
types = $.splat(types);
@@ -529,8 +635,14 @@ var Accessors;
Method: removeLabelData
Remove label properties from data.
+
+ Parameters:
+
+ A variable number of label property strings.
- See <removeData> for more details.
+ See also:
+
+ <Accessors.removeData>.
*/
removeLabelData: function() {
removeDataInternal.call(this, 'label', Array.prototype.slice.call(arguments));
@@ -542,31 +654,21 @@ var Accessors;
Class: Graph.Node
A <Graph> node.
-
- Parameters:
-
- obj - An object containing an 'id', 'name' and 'data' properties as described in <Graph.addNode>.
- complex - Whether node position properties should contain <Complex> or <Polar> instances.
-
- See also:
-
- <Graph>
-
- Description:
-
- An instance of <Graph.Node> is usually passed as parameter for most configuration/controller methods in the
- <Hypertree>, <RGraph> and <ST> classes.
-
- A <Graph.Node> object has as properties
-
- id - Node id.
- name - Node name.
- data - Node data property containing a hash (i.e {}) with custom options. For more information see <Loader.loadJSON>.
- selected - Whether the node is selected or not. Used by <ST> for selecting nodes that are between the root node and the selected node.
- angleSpan - For radial layouts such as the ones performed by the <Hypertree> and the <RGraph>. Contains _begin_ and _end_ properties containing angle values describing the angle span for this subtree.
- pos - Current position. Can be a <Complex> or <Polar> instance.
- startPos - Starting position. Used for interpolation.
- endPos - Ending position. Used for interpolation.
+
+ Implements:
+
+ <Accessors> methods.
+
+ The following <Graph.Util> methods are implemented by <Graph.Node>
+
+ - <Graph.Util.eachAdjacency>
+ - <Graph.Util.eachLevel>
+ - <Graph.Util.eachSubgraph>
+ - <Graph.Util.eachSubnode>
+ - <Graph.Util.anySubnode>
+ - <Graph.Util.getSubnodes>
+ - <Graph.Util.getParents>
+ - <Graph.Util.isDescendantOf>
*/
Graph.Node = new Class({
@@ -606,15 +708,11 @@ Graph.Node = new Class({
Parameters:
- id - A node id.
-
- Returns:
+ id - (string) A node id.
- A Boolean instance indicating whether this node is adjacent to the specified by id or not.
-
Example:
(start code js)
- node.adjacentTo('mynodeid');
+ node.adjacentTo('nodeId') == true;
(end code)
*/
adjacentTo: function(node) {
@@ -624,15 +722,11 @@ Graph.Node = new Class({
/*
Method: getAdjacency
- Returns a <Graph.Adjacence> object connecting the current <Graph.Node> and the node having _id_ as id.
+ Returns a <Graph.Adjacence> object connecting the current <Graph.Node> and the node having *id* as id.
Parameters:
- id - A node id.
-
- Returns:
-
- A <Graph.Adjacence> object or undefined.
+ id - (string) A node id.
*/
getAdjacency: function(id) {
return this.adjacencies[id];
@@ -641,11 +735,11 @@ Graph.Node = new Class({
/*
Method: getPos
- Returns the position of the node. Possible values are <Complex> or <Polar> instances.
+ Returns the position of the node.
Parameters:
- type - Possible values are "start", "end" or "current". Default's "current".
+ type - (string) Default's *current*. Possible values are "start", "end" or "current".
Returns:
@@ -653,7 +747,7 @@ Graph.Node = new Class({
Example:
(start code js)
- node.getPos('end');
+ var pos = node.getPos('end');
(end code)
*/
getPos: function(type) {
@@ -673,12 +767,12 @@ Graph.Node = new Class({
Parameters:
- value - A <Complex> or <Polar> instance.
- type - Possible values are "start", "end" or "current". Default's "current".
+ value - (object) A <Complex> or <Polar> instance.
+ type - (string) Default's *current*. Possible values are "start", "end" or "current".
Example:
(start code js)
- node.setPos(new Complex(0, 0), 'end');
+ node.setPos(new $jit.Complex(0, 0), 'end');
(end code)
*/
setPos: function(value, type) {
@@ -700,28 +794,21 @@ Graph.Node.implement(Accessors);
/*
Class: Graph.Adjacence
- A <Graph> adjacence (or edge). Connects two <Graph.Nodes>.
-
- Parameters:
-
- nodeFrom - A <Graph.Node>.
- nodeTo - A <Graph.Node>.
- data - Some custom hash data.
+ A <Graph> adjacence (or edge) connecting two <Graph.Nodes>.
+
+ Implements:
+
+ <Accessors> methods.
See also:
- <Graph>
-
- Description:
-
- An instance of <Graph.Adjacence> is usually passed as parameter for some configuration/controller methods in the
- <Hypertree>, <RGraph> and <ST> classes.
-
- A <Graph.Adjacence> object has as properties
+ <Graph>, <Graph.Node>
+ Properties:
+
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. For more information see <Loader.loadJSON>.
+ data - Node data property containing a hash (i.e {}) with custom options.
*/
Graph.Adjacence = new Class({
@@ -742,6 +829,10 @@ Graph.Adjacence.implement(Accessors);
Object: Graph.Util
<Graph> traversal and processing utility object.
+
+ Note:
+
+ For your convenience some of these methods have also been appended to <Graph> and <Graph.Node> classes.
*/
Graph.Util = {
/*
@@ -764,21 +855,23 @@ Graph.Util = {
/*
Method: getNode
- Returns a <Graph.Node> by _id_.
+ Returns a <Graph.Node> by *id*.
+
+ Also implemented by:
+
+ <Graph>
Parameters:
- graph - A <Graph> instance.
- id - A <Graph.Node> id.
-
- Returns:
-
- A <Graph> node.
+ graph - (object) A <Graph> instance.
+ id - (string) A <Graph.Node> id.
Example:
(start code js)
- Graph.Util.getNode(graph, 'nodeid');
+ $jit.Graph.Util.getNode(graph, 'nodeid');
+ //or...
+ graph.getNode('nodeid');
(end code)
*/
getNode: function(graph, id) {
@@ -788,18 +881,26 @@ Graph.Util = {
/*
Method: eachNode
- Iterates over <Graph> nodes performing an _action_.
+ Iterates over <Graph> nodes performing an *action*.
+
+ Also implemented by:
+
+ <Graph>.
Parameters:
- graph - A <Graph> instance.
- action - A callback function having a <Graph.Node> as first formal parameter.
+ graph - (object) A <Graph> instance.
+ action - (function) A callback function having a <Graph.Node> as first formal parameter.
Example:
(start code js)
- Graph.Util.each(graph, function(node) {
+ $jit.Graph.Util.eachNode(graph, function(node) {
alert(node.name);
});
+ //or...
+ graph.eachNode(function(node) {
+ alert(node.name);
+ });
(end code)
*/
eachNode: function(graph, action, flags) {
@@ -812,18 +913,26 @@ Graph.Util = {
/*
Method: eachAdjacency
- Iterates over <Graph.Node> adjacencies applying the _action_ function.
+ Iterates over <Graph.Node> adjacencies applying the *action* function.
+
+ Also implemented by:
+
+ <Graph.Node>.
Parameters:
- node - A <Graph.Node>.
- action - A callback function having <Graph.Adjacence> as first formal parameter.
+ node - (object) A <Graph.Node>.
+ action - (function) A callback function having <Graph.Adjacence> as first formal parameter.
Example:
(start code js)
- Graph.Util.eachAdjacency(node, function(adj) {
+ $jit.Graph.Util.eachAdjacency(node, function(adj) {
alert(adj.nodeTo.name);
});
+ //or...
+ node.eachAdjacency(function(adj) {
+ alert(adj.nodeTo.name);
+ });
(end code)
*/
eachAdjacency: function(node, action, flags) {
@@ -845,15 +954,21 @@ Graph.Util = {
Method: computeLevels
Performs a BFS traversal setting the correct depth for each node.
-
+
+ Also implemented by:
+
+ <Graph>.
+
+ Note:
+
The depth of each node can then be accessed by
>node._depth
Parameters:
- graph - A <Graph>.
- id - A starting node id for the BFS traversal.
- startDepth - _optional_ A minimum depth value. Default's 0.
+ graph - (object) A <Graph>.
+ id - (string) A starting node id for the BFS traversal.
+ startDepth - (optional|number) A minimum depth value. Default's 0.
*/
computeLevels: function(graph, id, startDepth, flags) {
@@ -882,19 +997,27 @@ Graph.Util = {
/*
Method: eachBFS
- Performs a BFS traversal applying _action_ to each <Graph.Node>.
+ Performs a BFS traversal applying *action* to each <Graph.Node>.
+
+ Also implemented by:
+
+ <Graph>.
Parameters:
- graph - A <Graph>.
- id - A starting node id for the BFS traversal.
- action - A callback function having a <Graph.Node> as first formal parameter.
+ 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.
Example:
(start code js)
- Graph.Util.eachBFS(graph, 'mynodeid', function(node) {
+ $jit.Graph.Util.eachBFS(graph, 'mynodeid', function(node) {
alert(node.name);
});
+ //or...
+ graph.eachBFS('mynodeid', function(node) {
+ alert(node.name);
+ });
(end code)
*/
eachBFS: function(graph, id, action, flags) {
@@ -918,14 +1041,18 @@ Graph.Util = {
/*
Method: eachLevel
- Iterates over a node's subgraph applying _action_ to the nodes of relative depth between _levelBegin_ and _levelEnd_.
+ Iterates over a node's subgraph applying *action* to the nodes of relative depth between *levelBegin* and *levelEnd*.
+
+ Also implemented by:
+
+ <Graph.Node>.
Parameters:
- node - A <Graph.Node>.
- levelBegin - A relative level value.
- levelEnd - A relative level value.
- action - A callback function having a <Graph.Node> as first formal parameter.
+ 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.
*/
eachLevel: function(node, levelBegin, levelEnd, action, flags) {
@@ -947,15 +1074,23 @@ Graph.Util = {
Method: eachSubgraph
Iterates over a node's children recursively.
+
+ Also implemented by:
+
+ <Graph.Node>.
Parameters:
- node - A <Graph.Node>.
- action - A callback function having a <Graph.Node> as first formal parameter.
+ node - (object) A <Graph.Node>.
+ action - (function) A callback function having a <Graph.Node> as first formal parameter.
Example:
(start code js)
- Graph.Util.eachSubgraph(node, function(node) {
- alert(node.name);
+ $jit.Graph.Util.eachSubgraph(node, function(node) {
+ alert(node.name);
+ });
+ //or...
+ node.eachSubgraph(function(node) {
+ alert(node.name);
});
(end code)
*/
@@ -968,15 +1103,23 @@ Graph.Util = {
Iterates over a node's children (without deeper recursion).
+ Also implemented by:
+
+ <Graph.Node>.
+
Parameters:
- node - A <Graph.Node>.
- action - A callback function having a <Graph.Node> as first formal parameter.
+ node - (object) A <Graph.Node>.
+ action - (function) A callback function having a <Graph.Node> as first formal parameter.
Example:
(start code js)
- Graph.Util.eachSubnode(node, function(node) {
+ $jit.Graph.Util.eachSubnode(node, function(node) {
alert(node.name);
});
+ //or...
+ node.eachSubnode(function(node) {
+ alert(node.name);
+ });
(end code)
*/
eachSubnode: function(node, action, flags) {
@@ -987,17 +1130,20 @@ Graph.Util = {
Method: anySubnode
Returns *true* if any subnode matches the given condition.
+
+ Also implemented by:
+
+ <Graph.Node>.
Parameters:
- node - A <Graph.Node>.
- cond - A callback function returning a Boolean instance. This function has as first formal parameter a <Graph.Node>.
-
- Returns:
- A boolean value.
+ node - (object) A <Graph.Node>.
+ cond - (function) A callback function returning a Boolean instance. This function has as first formal parameter a <Graph.Node>.
Example:
(start code js)
- Graph.Util.anySubnode(node, function(node) { return node.name == "mynodename"; });
+ $jit.Graph.Util.anySubnode(node, function(node) { return node.name == "mynodename"; });
+ //or...
+ node.anySubnode(function(node) { return node.name == 'mynodename'; });
(end code)
*/
anySubnode: function(node, cond, flags) {
@@ -1013,11 +1159,16 @@ Graph.Util = {
/*
Method: getSubnodes
- Collects all subnodes for a specified node. The _level_ parameter filters nodes having relative depth of _level_ from the root node.
+ Collects all subnodes for a specified node.
+ The *level* parameter filters nodes having relative depth of *level* from the root node.
+
+ Also implemented by:
+
+ <Graph.Node>.
Parameters:
- node - A <Graph.Node>.
- level - _optional_ A starting relative depth for collecting nodes. Default's 0.
+ node - (object) A <Graph.Node>.
+ level - (optional|number) Default's *0*. A starting relative depth for collecting nodes.
Returns:
An array of nodes.
@@ -1044,17 +1195,24 @@ Graph.Util = {
/*
Method: getParents
- Returns an Array of <Graph.Nodes> wich are parents of the given node.
+ Returns an Array of <Graph.Nodes> which are parents of the given node.
+
+ Also implemented by:
+
+ <Graph.Node>.
Parameters:
- node - A <Graph.Node>.
+ node - (object) A <Graph.Node>.
Returns:
An Array of <Graph.Nodes>.
Example:
(start code js)
- var pars = Graph.Util.getParents(node);
+ var pars = $jit.Graph.Util.getParents(node);
+ //or...
+ var pars = node.getParents();
+
if(pars.length > 0) {
//do stuff with parents
}
@@ -1072,18 +1230,22 @@ Graph.Util = {
/*
Method: isDescendantOf
- Returns a Boolean instance indicating if some node is descendant of the node with the given id.
+ Returns a boolean indicating if some node is descendant of the node with the given id.
+ Also implemented by:
+
+ <Graph.Node>.
+
+
Parameters:
- node - A <Graph.Node>.
- id - A <Graph.Node> id.
-
- Returns:
- Ture if _node_ is descendant of the node with the given _id_. False otherwise.
+ node - (object) A <Graph.Node>.
+ id - (string) A <Graph.Node> id.
Example:
(start code js)
- var pars = Graph.Util.isDescendantOf(node, "nodeid");
+ $jit.Graph.Util.isDescendantOf(node, "nodeid"); //true|false
+ //or...
+ node.isDescendantOf('nodeid');//true|false
(end code)
*/
isDescendantOf: function(node, id) {
@@ -1098,8 +1260,12 @@ Graph.Util = {
/*
Method: clean
- Cleans flags from nodes (by setting the _flag_ property to false).
+ Cleans flags from nodes.
+ Also implemented by:
+
+ <Graph>.
+
Parameters:
graph - A <Graph> instance.
*/
@@ -1108,17 +1274,17 @@ Graph.Util = {
/*
Method: getClosestNodeToOrigin
- Extends <Graph.Util>. Returns the closest node to the center of canvas.
+ Returns the closest node to the center of canvas.
+ Also implemented by:
+
+ <Graph>.
+
Parameters:
- graph - A <Graph> instance.
- prop - _optional_ a <Graph.Node> position property. Possible properties are 'start', 'current' or 'end'. Default's 'current'.
+ graph - (object) A <Graph> instance.
+ prop - (optional|string) Default's 'current'. A <Graph.Node> position property. Possible properties are 'start', 'current' or 'end'.
- Returns:
-
- Closest node to origin. Returns *null* otherwise.
-
*/
getClosestNodeToOrigin: function(graph, prop, flags) {
return this.getClosestNodeToPos(graph, Polar.KER, prop, flags);
@@ -1127,18 +1293,18 @@ Graph.Util = {
/*
Method: getClosestNodeToPos
- Extends <Graph.Util>. Returns the closest node to the given position.
+ Returns the closest node to the given position.
+ Also implemented by:
+
+ <Graph>.
+
Parameters:
- graph - A <Graph> instance.
- pos - A <Complex> or <Polar> instance.
- prop - _optional_ a <Graph.Node> position property. Possible properties are 'start', 'current' or 'end'. Default's 'current'.
+ 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:
-
- Closest node to the given position. Returns *null* otherwise.
-
*/
getClosestNodeToPos: function(graph, pos, prop, flags) {
var node = null;
View
2  Source/Options/Options.PieChart.js
@@ -3,6 +3,8 @@
*
*/
/*
+ Object: Options.PieChart
+
These are the options that you can use in the <PieChart> class.
Other options included in the PieChart are <Options.Canvas>, <Options.Label>, <Options.Tips> and <Options.Events>.
View
352 Source/Visualizations/ForceDirected.js
@@ -1,129 +1,42 @@
/*
* File: ForceDirected.js
- *
- * Implements the <ForceDirected> class and other derived classes.
- *
- * Description:
- *
- *
- * Inspired by:
- *
- * Disclaimer:
- *
- * This visualization was built from scratch, taking only the paper as inspiration, and only shares some features with this paper.
- *
- *
*/
/*
Class: ForceDirected
- The main ForceDirected class
-
- Extends:
-
- <Loader>, <Tips>, <NodeStyles>, <Layouts.ForceDirected>
-
- Parameters:
-
- canvas - A <Canvas> Class
- config - A configuration/controller object.
-
- Configuration:
-
- The configuration object can have the following properties (all properties are optional and have a default value)
-
- *General*
-
- - _naturalLength_ Natural Length
- - _restoringForce_ Restoring Force
- - _withLabels_ Whether the visualization should use/create labels or not. Default's *true*.
-
- *Node*
-
- Customize the visualization nodes' shape, color, and other style properties.
-
- Inherits options from <Options.Graph.Node>.
-
- *Edge*
-
- Customize the visualization edges' shape, color, and other style properties.
-
- Inherits Options from <Options.Graph.Edge>.
-
- *Animations*
-
- Inherits from <Options.Animation>.
+ A visualization that lays graphs using a Force-Directed layout algorithm.
+
+ Inspired by:
+
+ Force-Directed Drawing Algorithms (Stephen G. Kobourov) <http://www.cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf>
+
+ Constructor Options:
+
+ Inherits options from
+
+ - <Options.Canvas>
+ - <Options.Controller>
+ - <Options.Node>
+ - <Options.Edge>
+ - <Options.Label>
+ - <Options.Events>
+ - <Options.Tips>
+ - <Options.NodeStyles>
+ - <Options.Navigation>
+
+ Additionally, there are two parameters
+
+ levelDistance - (number) Default's *50*. The natural length desired for the edges.
+ iterations - (number) Default's *50*. The number of iterations for the spring layout simulation. Depending on the browser's speed you could set this to a more 'interesting' number, like *200*.
- *Controller options*
+ Instance Properties:
- Inherits from <Options.Controller>.
-
- Instance Properties:
-
- - _graph_ Access a <Graph> instance.
- - _op_ Access a <ForceDirected.Op> instance.
- - _fx_ Access a <ForceDirected.Plot> instance.
- - _labels_ Access a <ForceDirected.Label> interface implementation.
-
- Example:
-
- Here goes a complete example. In most cases you won't be forced to implement all properties and methods. In fact,
- all configuration properties have the default value assigned.
-
- I won't be instantiating a <Canvas> class here. If you want to know more about instantiating a <Canvas> class
- please take a look at the <Canvas> class documentation.
-
- (start code js)
- var fd = new ForceDirected(canvas, {
- naturalLength: 75,
- restoringForce: 2,
- withLabels: true,
- Node: {
- overridable: false,
- type: 'circle',
- color: '#ccb',
- lineWidth: 1,
- height: 5,
- width: 5,
- dim: 3
- },
- Edge: {
- overridable: false,
- type: 'line',
- color: '#ccb',
- lineWidth: 1
- },
- duration: 2500,
- fps: 40,
- transition: Trans.Quart.easeInOut,
- clearCanvas: true,
- onBeforeCompute: function(node) {
- //do something onBeforeCompute
- },
- onAfterCompute: function () {
- //do something onAfterCompute
- },
- onCreateLabel: function(domElement, node) {
- //do something onCreateLabel
- },
- onPlaceLabel: function(domElement, node) {
- //do something onPlaceLabel
- },
- onBeforePlotNode:function(node) {
- //do something onBeforePlotNode
- },
- onAfterPlotNode: function(node) {
- //do something onAfterPlotNode
- },
- onBeforePlotLine:function(adj) {
- //do something onBeforePlotLine
- },
- onAfterPlotLine: function(adj) {
- //do something onAfterPlotLine
- }
- });
- (end code)
+ canvas - Access a <Canvas> instance.
+ graph - Access a <Graph> instance.
+ op - Access a <ForceDirected.Op> instance.
+ fx - Access a <ForceDirected.Plot> instance.
+ labels - Access a <ForceDirected.Label> interface implementation.
*/
@@ -178,62 +91,50 @@ $jit.ForceDirected = new Class( {
/*
Method: refresh
- Computes nodes' positions and replots the tree.
-
+ Computes positions and plots the tree.
*/
refresh: function() {
this.compute();
this.plot();
},
- /*
- Method: reposition
-
- An alias for computing new positions to _endPos_
-
- See also:
-
- <ForceDirected.compute>
-
- */
reposition: function() {
this.compute('end');
},
- /*
+/*
Method: computeIncremental
- Perform the <Layout.ForceDirected.compute> method incrementally.
+ Performs the Force Directed algorithm incrementally.
Description:
ForceDirected algorithms can perform many computations and lead to JavaScript taking too much time to complete.
- This method splits the algorithm into "small parts" allowing the user to track the evolution of the algorithm and
+ This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and
avoiding browser messages such as "This script is taking too long to complete".
Parameters:
- opt - An Options object containing as properties
+ opt - (object) The object properties are described below
- _iter_ - Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property
- of your <ForceDirected> class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces.
- Default's 20.
+ iter - (number) Default's *20*. Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property
+ of your <ForceDirected> class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces.
- _property_ - Possible values are 'end', 'start', 'current'. You can also set an array of these properties. if you'd like to
- keep the current node positions but to perform these computations for final animation positions then you can just choose 'end'.
- Default's 'end'.
+ property - (string) Default's *end*. Whether to update starting, current or ending node positions. Possible values are 'end', 'start', 'current'.
+ You can also set an array of these properties. If you'd like to keep the current node positions but to perform these
+ computations for final animation positions then you can just choose 'end'.
- _onStep_ - A callback function called when each "small part" of the algorithm completed. This function gets as first formal
+ onStep - (function) A callback function called when each "small part" of the algorithm completed. This function gets as first formal
parameter a percentage value.
- _onComplete_ - A callback function called when the algorithm completed.
+ onComplete - A callback function called when the algorithm completed.
Example:
In this example I calculate the end positions and then animate the graph to those positions
(start code js)
- var fd = new ForceDirected(...);
+ var fd = new $jit.ForceDirected(...);
fd.computeIncremental({
iter: 20,
property: 'end',
@@ -264,10 +165,6 @@ $jit.ForceDirected = new Class( {
});
(end code)
- See also:
-
- <Layouts.ForceDirected.compute>
-
*/
computeIncremental: function(opt) {
opt = $.merge( {
@@ -284,7 +181,7 @@ $jit.ForceDirected = new Class( {
/*
Method: plot
- Plots the ForceDirected
+ Plots the ForceDirected graph. This is a shortcut to *fx.plot*.
*/
plot: function() {
this.fx.plot();
@@ -293,7 +190,7 @@ $jit.ForceDirected = new Class( {
/*
Method: animate
- Animates the graph to the end positions specified.
+ Animates the graph from the current positions to the 'end' node positions.
*/
animate: function(opt) {
this.fx.animate($.merge( {
@@ -308,24 +205,17 @@ $jit.ForceDirected.$extend = true;
/*
Class: ForceDirected.Op
-
- Performs advanced operations on trees and graphs.
+
+ Custom extension of <Graph.Op>.
Extends:
All <Graph.Op> methods
-
- Access:
-
- This instance can be accessed with the _op_ parameter of the <ForceDirected> instance created.
-
- Example:
-
- (start code js)
- var fd = new ForceDirected(canvas, config);
- fd.op.morph //or can also call any other <Graph.Op> method
- (end code)
+ See also:
+
+ <Graph.Op>
+
*/
ForceDirected.Op = new Class( {
@@ -337,25 +227,18 @@ $jit.ForceDirected.$extend = true;
});
/*
- Class: ForceDirected.Plot
-
- Performs plotting operations.
-
- Extends:
-
- All <Graph.Plot> methods
-
- Access:
-
- This instance can be accessed with the _fx_ parameter of the <ForceDirected> instance created.
-
- Example:
-
- (start code js)
- var fd = new ForceDirected(canvas, config);
- fd.fx.plot //or can also call any other <ForceDirected.Plot> method
- (end code)
-
+ Class: ForceDirected.Plot
+
+ Custom extension of <Graph.Plot>.
+
+ Extends:
+
+ All <Graph.Plot> methods
+
+ See also:
+
+ <Graph.Plot>
+
*/
ForceDirected.Plot = new Class( {
@@ -374,29 +257,34 @@ $jit.ForceDirected.$extend = true;
});
/*
- Object: ForceDirected.Label
-
- Label interface implementation for the ForceDirected
-
- See Also:
-
- <Graph.Label>, <ForceDirected.Label.HTML>, <ForceDirected.Label.SVG>
-
- */
+ Class: ForceDirected.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>.
+
+ */
ForceDirected.Label = {};
/*
- Class: ForceDirected.Label.Native
-
- Implements labels natively, using the Canvas text API.
+ ForceDirected.Label.Native
+
+ Custom extension of <Graph.Label.Native>.
Extends:
- <Graph.Label.Native>
+ All <Graph.Label.Native> methods
See also:
- <Hypertree.Label>, <ForceDirected.Label>, <ST.Label>, <Hypertree>, <ForceDirected>, <ST>, <Graph>.
+ <Graph.Label.Native>
*/
ForceDirected.Label.Native = new Class( {
@@ -404,18 +292,18 @@ $jit.ForceDirected.$extend = true;
});
/*
- Class: ForceDirected.Label.SVG
-
- Implements labels using SVG (currently not supported in IE).
-
- Extends:
-
- <Graph.Label.SVG>
-
- See also:
-
- <Hypertree.Label>, <ForceDirected.Label>, <ST.Label>, <Hypertree>, <ForceDirected>, <ST>, <Graph>.
-
+ ForceDirected.Label.SVG
+
+ Custom extension of <Graph.Label.SVG>.
+
+ Extends:
+
+ All <Graph.Label.SVG> methods
+
+ See also:
+
+ <Graph.Label.SVG>
+
*/
ForceDirected.Label.SVG = new Class( {
Implements: Graph.Label.SVG,
@@ -425,9 +313,9 @@ $jit.ForceDirected.$extend = true;
},
/*
- Method: placeLabel
+ placeLabel
- Overrides abstract method placeLabel in <Graph.Plot>.
+ Overrides abstract method placeLabel in <Graph.Label>.
Parameters:
@@ -456,17 +344,17 @@ $jit.ForceDirected.$extend = true;
});
/*
- Class: ForceDirected.Label.HTML
-
- Implements labels using plain old HTML.
+ ForceDirected.Label.HTML
+
+ Custom extension of <Graph.Label.HTML>.
Extends:
- <Graph.Label.HTML>
+ All <Graph.Label.HTML> methods.
See also:
- <Hypertree.Label>, <ForceDirected.Label>, <ST.Label>, <Hypertree>, <ForceDirected>, <ST>, <Graph>.
+ <Graph.Label.HTML>
*/
ForceDirected.Label.HTML = new Class( {
@@ -476,7 +364,7 @@ $jit.ForceDirected.$extend = true;
this.viz = viz;
},
/*
- Method: placeLabel
+ placeLabel
Overrides abstract method placeLabel in <Graph.Plot>.
@@ -511,17 +399,23 @@ $jit.ForceDirected.$extend = true;
/*
Class: ForceDirected.Plot.NodeTypes
- Here are implemented all kinds of node rendering functions.
- Rendering functions implemented are 'none', 'circle', 'triangle', 'rectangle', 'star' and 'square'.
+ 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 new Node types by implementing a new method in this class
+ You can add your custom node types, customizing your visualization to the extreme.
Example:
(start code js)
ForceDirected.Plot.NodeTypes.implement({
- 'newnodetypename': function(node, canvas) {
- //Render my node here.
+ '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
+ }
}
});
(end code)
@@ -613,22 +507,22 @@ $jit.ForceDirected.$extend = true;
/*
Class: ForceDirected.Plot.EdgeTypes
-
- Here are implemented all kinds of edge rendering functions.
- Rendering functions implemented are 'none', 'line' and 'arrow'.
-
- You can add new Edge types by implementing a new method in this class
-
+
+ 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:
-
+
(start code js)
ForceDirected.Plot.EdgeTypes.implement({
- 'newedgetypename': function(adj, canvas) {
- //Render my edge here.
+ 'mySpecialType': function(adj, canvas) {
+ //print your custom edge to canvas
}
});
(end code)
-
+
*/
ForceDirected.Plot.EdgeTypes = new Class({
'none': $.empty,
View
358 Source/Visualizations/Hypertree.js
@@ -1,25 +1,6 @@
/*
* File: Hypertree.js
*
- * Implements the <Hypertree> class and other derived classes.
- *
- * Description:
- *
- * A Hyperbolic Tree (HT) is a focus+context information visualization technique used to display large amount of inter-related data. This technique was originally developed at Xerox PARC.
- *
- * The HT algorithm plots a tree in what's called the Poincare Disk model of Hyperbolic Geometry, a kind of non-Euclidean geometry. By doing this, the HT algorithm applies a moebius transformation to the tree in order to display it with a magnifying glass effect.
- *
- * Inspired by:
- *
- * A Focus+Context Technique Based on Hyperbolic Geometry for Visualizing Large Hierarchies (John Lamping, Ramana Rao, and Peter Pirolli).
- *
- * <http://www.cs.tau.ac.il/~asharf/shrek/Projects/HypBrowser/startree-chi95.pdf>
- *
- * Disclaimer:
- *
- * This visualization was built from scratch, taking only the paper as inspiration, and only shares some features with the Hypertree.
- *
-
*/
/*
@@ -73,115 +54,47 @@ Graph.Util.moebiusTransformation = function(graph, pos, prop, startPos, flags) {
/*
Class: Hypertree
-
- The main Hypertree class
-
- Extends:
-
- <Loader>, <Layouts.Radial>, <Tips>
-
- Parameters:
-
- canvas - A <Canvas> Class
- config - A configuration/controller object.
-
- Configuration:
-
- The configuration object can have the following properties (all properties are optional and have a default value)
-
- *General*
-
- - _withLabels_ Whether the visualization should use/create labels or not. Default's *true*.
- - _radius_ The radius length of the visualization. Default's "auto" which means that the radius will be calculated to
- fit the canvas. You can change this value to any float value.
-
- *Node*
-
- Customize the visualization nodes' shape, color, and other style properties.
-
- Inherits options from <Options.Graph.Node>.
-
- *Edge*
-
- Customize the visualization edges' shape, color, and other style properties.
-
- Inherits from <Options.Graph.Edge>.
-
- *Animations*
-
- Inherits from <Options.Animation>.
-
- *Controller options*
-
- Inherits from <Options.Controller>.
-
- Instance Properties:
-
- - _graph_ Access a <Graph> instance.
- - _op_ Access a <Hypertree.Op> instance.
- - _fx_ Access a <Hypertree.Plot> instance.
- - _labels_ Access a <Hypertree.Label> instance.
-
- Example:
-
- Here goes a complete example. In most cases you won't be forced to implement all properties and methods. In fact,
- all configuration properties have the default value assigned.
-
- I won't be instantiating a <Canvas> class here. If you want to know more about instantiating a <Canvas> class
- please take a look at the <Canvas> class documentation.
+
+ A Hyperbolic Tree/Graph visualization.
+
+ Inspired by:
+
+ A Focus+Context Technique Based on Hyperbolic Geometry for Visualizing Large Hierarchies (John Lamping, Ramana Rao, and Peter Pirolli).
+ <http://www.cs.tau.ac.il/~asharf/shrek/Projects/HypBrowser/startree-chi95.pdf>
+
+ Note:
+
+ This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the Hypertree described in the paper.
- (start code js)
- var ht = new Hypertree(canvas, {
-
- Node: {
- overridable: false,
- type: 'circle',
- color: '#ccb',
- lineWidth: 1,
- height: 5,
- width: 5,
- dim: 7,
- transform: true
- },
- Edge: {
- overridable: false,
- type: 'hyperline',
- color: '#ccb',
- lineWidth: 1
- },
- duration: 1500,
- fps: 40,
- transition: Trans.Quart.easeInOut,
- clearCanvas: true,
- withLabels: true,
- radius: "auto",
-
- onBeforeCompute: function(node) {
- //do something onBeforeCompute
- },
- onAfterCompute: function () {
- //do something onAfterCompute
- },
- onCreateLabel: function(domElement, node) {
- //do something onCreateLabel
- },
- onPlaceLabel: function(domElement, node) {
- //do something onPlaceLabel
- },
- onBeforePlotNode:function(node) {
- //do something onBeforePlotNode
- },
- onAfterPlotNode: function(node) {
- //do something onAfterPlotNode
- },
- onBeforePlotLine:function(adj) {
- //do something onBeforePlotLine
- },
- onAfterPlotLine: function(adj) {
- //do something onAfterPlotLine
- }
- });
- (end code)
+ Constructor Options:
+
+ Inherits options from
+
+ - <Options.Canvas>
+ - <Options.Controller>
+ - <Options.Node>
+ - <Options.Edge>
+ - <Options.Label>
+ - <Options.Events>
+ - <Options.Tips>
+ - <Options.NodeStyles>
+ - <Options.Navigation>
+
+ Additionally, there are other parameters and some default values changed
+
+ radius - (string|number) Default's *auto*. The radius of the disc to plot the <Hypertree> in. 'auto' will take the smaller value from the width and height canvas dimensions. You can also set this to a custom value, for example *250*.
+ offset - (number) Default's *0*. A number in the range [0, 1) that will be substracted to each node position to make a more compact <Hypertree>. This will avoid placing nodes too far from each other when a there's a selected node.
+ fps - Described in <Options.Fx>. It's default value has been changed to *35*.
+ duration - Described in <Options.Fx>. It's default value has been changed to *1500*.
+ Edge.type - Described in <Options.Edge>. It's default value has been changed to *hyperline*.
+
+ Instance Properties:
+
+ canvas - Access a <Canvas> instance.
+ graph - Access a <Graph> instance.
+ op - Access a <Hypertree.Op> instance.
+ fx - Access a <Hypertree.Plot> instance.
+ labels - Access a <Hypertree.Label> interface implementation.
*/
@@ -240,7 +153,7 @@ $jit.Hypertree = new Class( {
/*
- Method: createLevelDistanceFunc
+ createLevelDistanceFunc
Returns the levelDistance function used for calculating a node distance
to its origin. This function returns a function that is computed
@@ -297,19 +210,15 @@ $jit.Hypertree = new Class( {
},
/*
- Method: refresh
-
- Computes nodes' positions and replots the tree.
-
- Parameters:
+ Method: refresh
+
+ Computes positions and plots the tree.
- reposition - _optional_ Set this to *true* to force repositioning.
+ Parameters:
- See also:
+ reposition - (optional|boolean) Set this to *true* to force all positions (current, start, end) to match.
- <Hypertree.reposition>
-
- */
+ */
refresh: function(reposition) {
if (reposition) {
this.reposition();
@@ -324,7 +233,7 @@ $jit.Hypertree = new Class( {
},
/*
- Method: reposition
+ reposition
Computes nodes' positions and restores the tree to its previous position.
@@ -348,7 +257,7 @@ $jit.Hypertree = new Class( {
/*
Method: plot
- Plots the Hypertree
+ Plots the <Hypertree>. This is a shortcut to *fx.plot*.
*/
plot: function() {
@@ -358,14 +267,13 @@ $jit.Hypertree = new Class( {
/*
Method: onClick
- Performs all calculations and animations to center the node specified by _id_.
+ Animates the <Hypertree> to center the node specified by *id*.
Parameters:
id - A <Graph.Node> id.
- opt - _optional_ An object containing some extra properties like
-
- - _hideLabels_ Hide labels when performing the animation. Default's *true*.
+ opt - (optional|object) An object containing some extra properties described below
+ hideLabels - (boolean) Default's *true*. Hide labels when performing the animation.
Example:
@@ -390,9 +298,16 @@ $jit.Hypertree = new Class( {
Parameters:
- pos - A <Complex> number determining the position to move the tree to.
- opt - _optional_ An object containing some extra properties defined in <Hypertree.onClick>
-
+ pos - (object) A *x, y* coordinate object where x, y in [0, 1), to move the tree to.
+ opt - This object has been defined in <Hypertree.onClick>
+
+ Example:
+
+ (start code js)
+ ht.move({ x: 0, y: 0.7 }, {
+ hideLabels: false
+ });
+ (end code)
*/
move: function(pos, opt) {
@@ -425,23 +340,16 @@ $jit.Hypertree.$extend = true;
/*
Class: Hypertree.Op
- Performs advanced operations on trees and graphs.
+ Custom extension of <Graph.Op>.
Extends:
All <Graph.Op> methods
+
+ See also:
+
+ <Graph.Op>
- Access:
-
- This instance can be accessed with the _op_ parameter of the hypertree instance created.
-
- Example:
-
- (start code js)
- var ht = new Hypertree(canvas, config);
- ht.op.morph //or can also call any other <Graph.Op> method
- (end code)
-
*/
Hypertree.Op = new Class( {
@@ -455,23 +363,16 @@ $jit.Hypertree.$extend = true;
/*
Class: Hypertree.Plot
- Performs plotting operations.
-
- Extends:
-
- All <Graph.Plot> methods
-
- Access:
-
- This instance can be accessed with the _fx_ parameter of the hypertree instance created.
-
- Example:
-
- (start code js)
- var ht = new Hypertree(canvas, config);
- ht.fx.animate //or can also call any other <Hypertree.Plot> method
- (end code)
-
+ Custom extension of <Graph.Plot>.
+
+ Extends:
+
+ All <Graph.Plot> methods
+
+ See also:
+
+ <Graph.Plot>
+
*/
Hypertree.Plot = new Class( {
@@ -492,27 +393,32 @@ $jit.Hypertree.$extend = true;
/*
Object: Hypertree.Label
- Label interface implementation for the Hypertree
-
- See Also:
-
- <Graph.Label>, <Hypertree.Label.HTML>, <RGraph.Label.SVG>
+ 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>.
*/
Hypertree.Label = {};
/*
- Class: Hypertree.Label.Native
+ Hypertree.Label.Native
- Implements labels natively, using the Canvas text API.
+ Custom extension of <Graph.Label.Native>.
- Implements:
+ Extends:
- <Graph.Label.Native>
+ All <Graph.Label.Native> methods
See also:
- <Hypertree.Label>, <Hypertree.Label>, <ST.Label>, <Hypertree>, <RGraph>, <ST>, <Graph>.
+ <Graph.Label.Native>
*/
Hypertree.Label.Native = new Class( {
@@ -531,18 +437,18 @@ $jit.Hypertree.$extend = true;
});
/*
- Class: Hypertree.Label.SVG
-
- Implements labels using SVG (currently not supported in IE).
-
- Extends:
-
- <Graph.Label.SVG>
-
- See also:
-
- <Hypertree.Label>, <Hypertree.Label>, <ST.Label>, <Hypertree>, <RGraph>, <ST>, <Graph>.
+ Hypertree.Label.SVG
+ Custom extension of <Graph.Label.SVG>.
+
+ Extends:
+
+ All <Graph.Label.SVG> methods
+
+ See also:
+
+ <Graph.Label.SVG>
+
*/
Hypertree.Label.SVG = new Class( {
Implements: Graph.Label.SVG,
@@ -552,7 +458,7 @@ $jit.Hypertree.$extend = true;
},
/*
- Method: placeLabel
+ placeLabel
Overrides abstract method placeLabel in <Graph.Plot>.
@@ -583,17 +489,17 @@ $jit.Hypertree.$extend = true;
});
/*
- Class: Hypertree.Label.HTML
+ Hypertree.Label.HTML
- Implements labels using plain old HTML.
+ Custom extension of <Graph.Label.HTML>.
Extends:
- <Graph.Label.HTML>
+ All <Graph.Label.HTML> methods.
See also:
- <Hypertree.Label>, <Hypertree.Label>, <ST.Label>, <Hypertree>, <RGraph>, <ST>, <Graph>.
+ <Graph.Label.HTML>
*/
Hypertree.Label.HTML = new Class( {
@@ -603,7 +509,7 @@ $jit.Hypertree.$extend = true;
this.viz = viz;
},
/*
- Method: placeLabel
+ placeLabel
Overrides abstract method placeLabel in <Graph.Plot>.
@@ -639,17 +545,23 @@ $jit.Hypertree.$extend = true;
/*
Class: Hypertree.Plot.NodeTypes
- Here are implemented all kinds of node rendering functions.
- Rendering functions implemented are 'none', 'circle', 'triangle', 'rectangle', 'star' and 'square'.
+ 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 new Node types by implementing a new method in this class
+ You can add your custom node types, customizing your visualization to the extreme.
Example:
(start code js)
Hypertree.Plot.NodeTypes.implement({
- 'newnodetypename': function(node, canvas) {
- //Render my node here.
+ '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
+ }
}
});
(end code)
@@ -767,21 +679,21 @@ $jit.Hypertree.$extend = true;
/*
Class: Hypertree.Plot.EdgeTypes
- Here are implemented all kinds of edge rendering functions.
- Rendering functions implemented are 'none', 'line' and 'hyperline'.
-
- You can add new Edge types by implementing a new method in this class
-
- Example:
-
- (start code js)
- Hypertree.Plot.EdgeTypes.implement({
- 'newedgetypename': function(adj, canvas) {
- //Render my edge here.
- }
- });
- (end code)
-
+ This class contains a list of <Graph.Adjacence> built-in types.
+ Edge types implemented are 'none', 'line', 'arrow' and 'hyperline'.
+
+ You can add your custom edge types, customizing your visualization to the extreme.
+
+ Example:
+
+ (start code js)
+ Hypertree.Plot.EdgeTypes.implement({
+ 'mySpecialType': function(adj, canvas) {
+ //print your custom edge to canvas
+ }
+ });
+ (end code)
+
*/
Hypertree.Plot.EdgeTypes = new Class({
'none': $.empty,
View
267 Source/Visualizations/Icicle.js
@@ -3,6 +3,47 @@
*
*/
+/*
+ Class: Icicle
+
+ Icicle space filling visualization.
+
+ Constructor Options:
+
+ Inherits options from
+
+ - <Options.Canvas>
+ - <Options.Controller>
+ - <Options.Node>
+ - <Options.Edge>
+ - <Options.Label>
+ - <Options.Events>
+ - <Options.Tips>
+ - <Options.NodeStyles>
+ - <Options.Navigation>
+
+ Additionally, there are other parameters and some default values changed
+
+ orientation - (string) Default's *h*. Whether to set horizontal or vertical layouts. Possible values are 'h' and 'v'.
+ offset - (number) Default's *2*. Boxes offset.
+ constrained - (boolean) Default's *false*. Whether to show the entire tree when loaded or just the number of levels specified by _levelsToShow_.
+ levelsToShow - (number) Default's *3*. The number of levels to show for a subtree. This number is relative to the selected node.
+ animate - (boolean) Default's *false*. Whether to animate transitions.
+ Node.type - Described in <Options.Node>. Default's *rectangle*.
+ Label.type - Described in <Options.Label>. Default's *Native*.
+ duration - Described in <Options.Fx>. Default's *700*.
+ fps - Described in <Options.Fx>. Default's *45*.
+
+ Instance Properties:
+
+ canvas - Access a <Canvas> instance.
+ graph - Access a <Graph> instance.
+ op - Access a <Icicle.Op> instance.
+ fx - Access a <Icicle.Plot> instance.
+ labels - Access a <Icicle.Label> interface implementation.
+
+*/
+
$jit.Icicle = new Class({
Implements: [ Loader, Extras, Layouts.Icicle ],
@@ -37,7 +78,7 @@ $jit.Icicle = new Class({
type: 'Native'
},
duration: 700,
- fps: 25
+ fps: 45
};
var opts = Options("Canvas", "Node", "Edge", "Fx", "Tips", "NodeStyles",
@@ -75,6 +116,11 @@ $jit.Icicle = new Class({
this.initializeExtras();
},
+ /*
+ Method: refresh
+
+ Computes positions and plots the tree.
+ */
refresh: function(){
var labelType = this.config.Label.type;
if(labelType != 'Native') {
@@ -85,14 +131,26 @@ $jit.Icicle = new Class({
this.plot();
},
+ /*
+ Method: plot
+
+ Plots the Icicle visualization. This is a shortcut to *fx.plot*.
+
+ */
plot: function(){
this.fx.plot(this.config);
},
- leaf: function(n){
- return Graph.Util.getSubnodes(n, [1, 1], "ignore").length == 0;
- },
-
+ /*
+ Method: enter
+
+ Sets the node as root.
+
+ Parameters:
+
+ node - (object) A <Graph.Node>.
+
+ */
enter: function (node) {
if (this.busy)
return;
@@ -148,6 +206,12 @@ $jit.Icicle = new Class({
}
},
+ /*
+ Method: out
+
+ Sets the parent node of the current selected node as root.
+
+ */
out: function(){
if(this.busy)
return;
@@ -243,6 +307,20 @@ $jit.Icicle = new Class({
},
});
+/*
+ Class: Icicle.Op
+
+ Custom extension of <Graph.Op>.
+
+ Extends:
+
+ All <Graph.Op> methods
+
+ See also:
+
+ <Graph.Op>
+
+ */
$jit.Icicle.Op = new Class({
Implements: Graph.Op,
@@ -293,6 +371,20 @@ $jit.Icicle.Group = new Class({
}
});
+/*
+ Class: Icicle.Plot
+
+ Custom extension of <Graph.Plot>.
+
+ Extends:
+
+ All <Graph.Plot> methods
+
+ See also:
+
+ <Graph.Plot>
+
+ */
$jit.Icicle.Plot = new Class({
Implements: Graph.Plot,
@@ -327,17 +419,36 @@ $jit.Icicle.Plot = new Class({
});