SVGTree

Handy library for rendering trees based on HTML5 technologies

Supported by all major browsers (Firefox, Google Chrome, and IE 11+)
Supports user interaction
Has no external JavaScript dependencies

Download version 0.3.0(minified & zipped)

Getting Started

To use the library, include its main script and stylesheet in the head section of the page:

<html>
<head>
    <!-- other HTML -->
    <link rel="stylesheet" type="text/css" href="svgtree.css" />
    <script src="svgtree.js"></script>
</head>

Then, use SVGTree constructor to initialize the tree:

<body>
    <!-- other elements -->
    <div id="tree"></div>
    <script>
    var notation = "((A,B)C,(D,E)F);"
    var container = document.getElementById("tree");
    new SVGTree(notation, container);
    </script>
</body>
</html>

Usage

The basic form of the constructor is

new SVGTree(notation, container, options)

where

notation is the Newick format notation for the tree
container is the HTML element to hold the tree, normally an empty <div> element
options are the display options in the form of a JavaScript object.

See the demo for the examples of usage.

Recognized options:

orientation
Determines the orientation of the tree. One of the following:
- 'h' (children below their ancestors)
- 'v' (children to the right of their ancestors)
Default value: 'v'.
nodes
Determines the shape of node markers. Allowed values are 'circle' and 'square'.
Default value: 'circle'.
edges
Determines the shape of edges in the tree. Allowed values are 'straight' and 'angular'.
Default value: 'angular'.
size
Determines the size of the <svg> element containing the tree. Either an array of two values that determine the width and the height of the <svg> element in pixels, or one of the two strings:
- 'fit' to resize the <svg> element to fit the entire tree after each rendering operation
- 'keep' to keep the size of the <svg> element set externally (e.g., in a stylesheet).
Default value: 'keep'.
interaction
Determines how a user can interact with the tree. An array of zero or more strings:
- 'collapse' - a user can collapse and expand nodes
- 'rearrange' - a user can rearrange siblings
- 'edit' - a user can edit node labels
- 'add' - a user can add new nodes into the tree by pressing insert key
- 'remove' - a user can remove nodes from the tree by pressing delete key
- 'drag' - a user can use drag'n'drop to move or copy portions of the tree (note that the nodes can be dragged between two trees on the same HTML page)
A special value false is equivalent to an empty array (no interactions allowed).
Default value: false.
dragAsText
Allows to drag text from outside sources. The dragged text is interpreted as Newick form of a subtree to be added to the tree. In case the Newick form is malformed, the text is used to create a single node.
The same option allows dropping nodes anywhere on the HTML page or other applications where the text input is expected. The dropped text is the Newick representation of the dragged subtree.
Default value: false.
Note: dragAsText is effectively always true in IE 11.
depthDistance
Distance in pixels between neighboring levels of the tree. If the tree, for example, has a horizontal layout, all nodes on the same level have the same X coordinate. Hence, depthDistance is defined as the horizontal distance between the neighboring levels.
Default value: 50.
leafDistance
Minimal distance in pixels between nodes on the same level of the tree.
Default value: 40.
padding
Minimal distance in pixels between container edges and the elements of the tree.
Default value: 30.
labelBackgrounds
If true, a semi-transparent rectangle is drawn behind each node label to improve readability. Determining rectangle positions is the most costly operation during rendering, so it makes sense to switch off label backgrounds for big trees.
Default value: true.

SVGTree Viewer

SVGTree Viewer is a widget that simplifies interaction with a tree. The widget is created similarly to the tree:

new SVGTreeViewer(notation, container, options)

where

notation is the Newick format notation for the tree
container is the HTML element to hold the tree, normally an empty <div> element
options are the display options in the form of a JavaScript object.

See the viewer demo for the examples of usage.

The widget recognizes all options of the tree constructor and some more:

undo
Whether to display undo and redo buttons.
Default value: true.
newick
Whether to allow to switch to the Newick representation of the tree.
Default value: true.
settings
Whether to allow a user to customize tree display settings.
Default value: true.