Spacetree.js

The main ST class

Extends

Loader

Parameters

Configuration

The configuration object can have the following properties (all properties are optional and have a default value)

General

• levelsToShow Depth of the plotted tree.  The plotted tree will be pruned in order to fit the specified depth if constrained=true.  Default’s 2.
• constrained If true, the algorithm will try to plot only the part of the tree that fits the Canvas.
• subtreeOffset Separation offset between subtrees.  Default’s 8.
• siblingOffset Separation offset between siblings.  Default’s 5.
• levelDistance Distance between levels.  Default’s 30.
• orientation Sets the orientation layout.  Implemented orientations are left (the root node will be placed on the left side of the screen), top (the root node will be placed on top of the screen), bottom and right.  Default’s “left”.
• align Whether the tree alignment is left, center or right.
• indent Used when alignment is left or right and shows an indentation between parent and children.  Default’s 10.
• withLabels Whether the visualization should use/create labels or not.  Default’s true.

Node

Customize the visualization nodes’ shape, color, and other style properties.

• Node

This object has as properties

• overridable Determine whether or not nodes properties can be overriden by a particular node.  Default’s false.

If given a JSON tree or graph, a node data property contains properties which are the same as defined here but prefixed with a dollar sign (i.e $), the node properties will override the global node properties.

• type Node type (shape).  Possible options are “none”, “square”, “rectangle”, “ellipse” and “circle”.  Default’s “rectangle”.
• color Node color.  Default’s ‘#ccb’.
• lineWidth Line width.  If nodes aren’t drawn with strokes then this property won’t be of any use.  Default’s 1.
• height Node height.  Used for plotting rectangular nodes.  Width and height properties are also used as bounding box for nodes of different shapes.  This means that for all shapes you’d have to make sure that the node’s shape is contained in the bounding box defined by width and height parameters.  Default’s 20.
• width Node width.  Used for plotting rectangular nodes and for calculating a node’s bounding box.  Default’s 90.
• dim An extra parameter used by other complex shapes such as square and circle to determine the shape’s diameter.  Please notice that even if these complex shapes (square, circle) only use dim for calculating it’s diameter property, the complex shape must be contained in the bounding box calculated with the width and height parameters.  Default’s 15.
• align Defines a node’s alignment.  Possible values are “center”, “left”, “right”.  Default’s “center”.

Edge

Customize the visualization edges’ shape, color, and other style properties.

• Edge

This object has as properties

• overridable Determine whether or not edges properties can be overriden by a particular edge object.  Default’s false.

If given a JSON complex graph (defined in Loader.loadJSON), an adjacency data property contains properties which are the same as defined here but prefixed with a dollar sign (i.e $), the adjacency properties will override the global edge properties.

• type Edge type (shape).  Possible options are “none”, “line”, “quadratic:begin”, “quadratic:end”, “bezier” and “arrow”.  Default’s “line”.
• color Edge color.  Default’s ‘#ccb’.
• lineWidth Line width.  If edges aren’t drawn with strokes then this property won’t be of any use.  Default’s 1.
• dim An extra parameter used by other complex shapes such as quadratic, arrow and bezier to determine the shape’s diameter.

Animations

• duration Duration of the animation in milliseconds.  Default’s 700.
• fps Frames per second.  Default’s 25.
• transition One of the transitions defined in the Animation class.  Default’s Quart.easeInOut.
• clearCanvas Whether to clear canvas on each animation frame or not.  Default’s true.

Controller options

You can also implement controller functions inside the configuration object.  This functions are

• onBeforeCompute(node) This method is called right before performing all computation and animations to the JIT visualization.
• onAfterCompute() This method is triggered right after all animations or computations for the JIT visualizations ended.
• onCreateLabel(domElement, node) This method receives the label dom element as first parameter, and the corresponding Graph.Node as second parameter.  This method will only be called on label creation.  Note that a Graph.Node is a node from the input tree/graph you provided to the visualization.  If you want to know more about what kind of JSON tree/graph format is used to feed the visualizations, you can take a look at Loader.loadJSON.  This method proves useful when adding events to the labels used by the JIT.
• onPlaceLabel(domElement, node) This method receives the label dom element as first parameter and the corresponding Graph.Node as second parameter.  This method is called each time a label has been placed on the visualization, and thus it allows you to update the labels properties, such as size or position.  Note that onPlaceLabel will be triggered after updating the labels positions.  That means that, for example, the left and top css properties are already updated to match the nodes positions.
• onBeforePlotNode(node) This method is triggered right before plotting a given node.  The node parameter is the Graph.Node to be plotted.  This method is useful for changing a node style right before plotting it.
• onAfterPlotNode(node) This method is triggered right after plotting a given node.  The node parameter is the Graph.Node plotted.
• onBeforePlotLine(adj) This method is triggered right before plotting an edge.  The adj parameter is a Graph.Adjacence object.  This method is useful for adding some styles to a particular edge before being plotted.
• onAfterPlotLine(adj) This method is triggered right after plotting an edge.  The adj parameter is the Graph.Adjacence plotted.
• request(nodeId, level, onComplete) This method is used for buffering information into the visualization.  When clicking on an empty node, the visualization will make a request for this node’s subtree, specifying a given level for this subtree.  Once this request is completed the onComplete object must be called with the given result.

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 instanciating a Canvas class here.  If you want to know more about instanciating a Canvas class please take a look at the Canvas class documentation.

var st = new ST(canvas, {
  orientation: "left",
  levelsToShow: 2,
  subtreeOffset: 8,
  siblingOffset: 5,
  levelDistance: 30,
  withLabels: true,
  align: "center",
  multitree: false,
  indent: 10,
  Node: {
    overridable: false,
    type: 'rectangle',
    color: '#ccb',
    lineWidth: 1,
    height: 20,
    width: 90,
    dim: 15,
    align: "center"
  },
  Edge: {
    overridable: false,
    type: 'line',
    color: '#ccc',
    dim: 15,
    lineWidth: 1
  },
  duration: 700,
  fps: 25,
  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
  },
  request:         false

});

Instance Properties

• graph Access a Graph instance.
• op Access a ST.Op instance.
• fx Access a ST.Plot instance.

Performs advanced operations on trees and graphs.

Extends

All Graph.Op methods

Access

This instance can be accessed with the op parameter of the st instance created.

Example

var st = new ST(canvas, config);
st.op.morph //or can also call any other <Graph.Op> method

Performs low level geometrical computations.

Access

This instance can be accessed with the geom parameter of the st instance created.

Example

var st = new ST(canvas, config);
st.geom.translate //or can also call any other <ST.Geom> method

Performs plotting operations.

Extends

All Graph.Plot methods

Access

This instance can be accessed with the fx parameter of the st instance created.

Example

var st = new ST(canvas, config);
st.fx.placeLabel //or can also call any other <ST.Plot> method

Here are implemented all kinds of node rendering functions.  Rendering functions implemented are ‘none’, ‘circle’, ‘ellipse’, ‘rectangle’ and ‘square’.

You can add new Node types by implementing a new method in this class

Example

ST.Plot.NodeTypes.implement({
  'newnodetypename': function(node, canvas) {
    //Render my node here.
  }
});

Here are implemented all kinds of edge rendering functions.  Rendering functions implemented are ‘none’, ‘line’, ‘quadratic:begin’, ‘quadratic:end’, ‘bezier’ and ‘arrow’.

You can add new Edge types by implementing a new method in this class

Example

ST.Plot.EdgeTypes.implement({
  'newedgetypename': function(adj, canvas) {
    //Render my edge here.
  }
});