Hypertree.js

The main Hypertree class

Extends

Loader, AngularWidth

Parameters

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.

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”, “circle”, “triangle”, “star”.  Default’s “circle”.
• 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.  Default’s 5.
• width Node width.  Used for plotting rectangular nodes.  Default’s 5.
• dim An extra parameter used by other complex shapes such as square and circle to determine the shape’s diameter.  Default’s 7.
• transform Whether to apply the moebius transformation to the nodes or not.  Default’s true.

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” and “hyperline”.  Default’s “hyperline”.
• 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.

Animations

• duration Duration of the animation in milliseconds.  Default’s 1500.
• fps Frames per second.  Default’s 40.
• 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.

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 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,

  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
  }
});

Instance Properties

• graph Access a Graph instance.
• op Access a Hypertree.Op instance.
• fx Access a Hypertree.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 hypertree instance created.

Example

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

Performs plotting operations.

Extends

All Graph.Plot methods

Access

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

Example

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

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

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

Example

Hypertree.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’ and ‘hyperline’.

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

Example

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