ST
A Tree layout with advanced contraction and expansion animations.
Inspired by
SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation (Catherine Plaisant, Jesse Grosjean, Benjamin B. Bederson) http://hcil.cs.umd.edu/trs/2002-05/2002-05.pdf
Drawing Trees (Andrew J. Kennedy) http://research.microsoft.com/en-us/um/people/akenn/fun/drawingtrees.pdf
Note
This visualization was built and engineered from scratch, taking only the papers as inspiration, and only shares some features with the visualization described in those papers.
Implements
All Loader methods
Constructor Options
Inherits options from
Additionally, there are other parameters and some default values changed
| constrained | (boolean) Default’s true. Whether to show the entire tree when loaded or just the number of levels specified by levelsToShow. |
| levelsToShow | (number) Default’s 2. The number of levels to show for a subtree. This number is relative to the selected node. |
| levelDistance | (number) Default’s 30. The distance between two consecutive levels of the tree. |
| Node.type | Described in Options.Node. Default’s set to rectangle. |
| offsetX | (number) Default’s 0. The x-offset distance from the selected node to the center of the canvas. |
| offsetY | (number) Default’s 0. The y-offset distance from the selected node to the center of the canvas. |
| duration | Described in Options.Fx. It’s default value has been changed to 700. |
Instance Properties
| canvas | Access a Canvas instance. |
| graph | Access a Graph instance. |
| op | Access a ST.Op instance. |
| fx | Access a ST.Plot instance. |
| labels | Access a ST.Label interface implementation. |
plot
Plots the ST. This is a shortcut to fx.plot.
switchPosition
| switchPosition: function( | pos, | | method, | | onComplete | ) |
|
Switches the tree orientation.
Parameters
| pos | (string) The new tree orientation. Possible values are “top”, “left”, “right” and “bottom”. |
| method | (string) Set this to “animate” if you want to animate the tree when switching its position. You can also set this parameter to “replot” to just replot the subtree. |
| onComplete | (optional|object) This callback is called once the “switching” animation is complete. |
Example
st.switchPosition("right", "animate", {
onComplete: function() {
alert('completed!');
}
});
switchAlignment
| switchAlignment: function( | align, | | method, | | onComplete | ) |
|
Switches the tree alignment.
Parameters
| align | (string) The new tree alignment. Possible values are “left”, “center” and “right”. |
| method | (string) Set this to “animate” if you want to animate the tree after aligning its position. You can also set this parameter to “replot” to just replot the subtree. |
| onComplete | (optional|object) This callback is called once the “switching” animation is complete. |
Example
st.switchAlignment("right", "animate", {
onComplete: function() {
alert('completed!');
}
});
addNodeInPath
| addNodeInPath: function( | id | ) |
|
Adds a node to the current path as selected node. The selected node will be visible (as in non-collapsed) at all times.
Parameters
Example
st.addNodeInPath("nodeId");
clearNodesInPath
| clearNodesInPath: function( | id | ) |
|
Removes all nodes tagged as selected by the ST.addNodeInPath method.
See also
ST.addNodeInPath
Example
st.clearNodesInPath();
refresh
Computes positions and plots the tree.
setRoot
| setRoot: function( | id, | | method, | | onComplete | ) |
|
Switches the current root node. Changes the topology of the Tree.
Parameters
| id | (string) The id of the node to be set as root. |
| method | (string) Set this to “animate” if you want to animate the tree after adding the subtree. You can also set this parameter to “replot” to just replot the subtree. |
| onComplete | (optional|object) An action to perform after the animation (if any). |
Example
st.setRoot('nodeId', 'animate', {
onComplete: function() {
alert('complete!');
}
});
addSubtree
| addSubtree: function( | subtree, | | method, | | onComplete | ) |
|
Adds a subtree.
Parameters
| subtree | (object) A JSON Tree object. See also Loader.loadJSON. |
| method | (string) Set this to “animate” if you want to animate the tree after adding the subtree. You can also set this parameter to “replot” to just replot the subtree. |
| onComplete | (optional|object) An action to perform after the animation (if any). |
Example
st.addSubtree(json, 'animate', {
onComplete: function() {
alert('complete!');
}
});
removeSubtree
| removeSubtree: function( | id, | | removeRoot, | | method, | | onComplete | ) |
|
Removes a subtree.
Parameters
| id | (string) The id of the subtree to be removed. |
| removeRoot | (boolean) Default’s false. Remove the root of the subtree or only its subnodes. |
| method | (string) Set this to “animate” if you want to animate the tree after removing the subtree. You can also set this parameter to “replot” to just replot the subtree. |
| onComplete | (optional|object) An action to perform after the animation (if any). |
Example
st.removeSubtree('idOfSubtreeToBeRemoved', false, 'animate', {
onComplete: function() {
alert('complete!');
}
});
select
| select: function( | id, | | onComplete | ) |
|
Selects a node in the ST without performing an animation. Useful when selecting nodes which are currently hidden or deep inside the tree.
Parameters
| id | (string) The id of the node to select. |
| onComplete | (optional|object) an onComplete callback. |
Example
st.select('mynodeid', {
onComplete: function() {
alert('complete!');
}
});
onClick
| onClick: function ( | id, | | options | ) |
|
Animates the ST to center the node specified by id.
Parameters
| id | (string) A node id. |
| options | (optional|object) A group of options and callbacks described below. |
| onComplete | (object) An object callback called when the animation finishes. |
| Move | (object) An object that has as properties offsetX or offsetY for adding some offset position to the centered node. |
Example
st.onClick('mynodeid', {
Move: {
enable: true,
offsetX: 30,
offsetY: 5
},
onComplete: function() {
alert('yay!');
}
});
getAlignedPos
| getAlignedPos: function( | pos, | | width, | | height | ) |
|
Returns a x, y object with the position of the top/left corner of a ST node.
Parameters
| pos | (object) A Graph.Node position. |
| width | (number) The width of the node. |
| height | (number) The height of the node. |
ST.Plot.NodeTypes
This class contains a list of Graph.Node built-in types. Node types implemented are ‘none’, ‘circle’, ‘rectangle’, ‘ellipse’ and ‘square’.
You can add your custom node types, customizing your visualization to the extreme.
Example
ST.Plot.NodeTypes.implement({
'mySpecialType': {
'render': function(node, canvas) {
//print your custom node to canvas
},
//optional
'contains': function(node, pos) {
//return true if pos is inside the node or false otherwise
}
}
});
ST.Plot.EdgeTypes
This class contains a list of Graph.Adjacence built-in types. Edge types implemented are ‘none’, ‘line’, ‘arrow’, ‘quadratic:begin’, ‘quadratic:end’, ‘bezier’.
You can add your custom edge types, customizing your visualization to the extreme.
Example
ST.Plot.EdgeTypes.implement({
'mySpecialType': {
'render': function(adj, canvas) {
//print your custom edge to canvas
},
//optional
'contains': function(adj, pos) {
//return true if pos is inside the arc or false otherwise
}
}
});
