SVGTree Demo

The examples on this page showcase the basic functionality of the trees made with SVGTree.


Initialization

Trees can be created using the SVGTree function. The function accepts the three arguments: the Newick notation, the container element (usually, a <DIV>), and (optionally) display options.

Code

// In HTML:
// <div id="test-init"></div>
var svg = document.querySelector('#test-init');
new SVGTree('(A,B)C;', svg);

Newick Format

To include special characters (,();) associated with the nodes of the tree, escape them with a backslash \.

Code

var container = document.querySelector('#test-newick');
var options = {
    'leafDistance': 50 // widen the tree a little
};
new SVGTree('(s\l\a\sh\\\\,node,(node 2,comma \\,)\\(parentheses\\))R;', 
     container, options);

Representation

Options allow to change the presentation of the tree. For example, edges parameter controls the shape of the edges (angular or straight), and nodes parameter determines the shape of the nodes.

Code

var container = document.querySelector('#test-edges-nodes');
new SVGTree('(A,),(B,C),(D,E))R;', container, {
    'nodes': 'square',
    'edges': 'straight'
});

Orientation

In addition to the vertical mode (children below their ancestors), the tree can be rendered in the horizontal mode (children to the right of their ancestors).

Code

var container = document.querySelector('#test-hmode');
new SVGTree('(A,),(B,C),(D,E))R;', container, {
    'orientation': 'h'
});

Size

By default, the size of the SVG element where the tree is drawn isn't set, which means you should specify it, e.g. using CSS. This behavior can be changed by setting size option to 'fit' (to fit the tree), or an array of the two values (width and height of the SVG element in pixels).

Code

var container = document.querySelector('#test-resize');
new SVGTree('(A,),(B,C),(D,E))R;', container, {
    'size': 'fit'
});

Collapse Option

The tree may respond to the user events. The degree of interaction can be tuned using interaction option, which takes an array of possible interactions. For example, you can allow to collapse and expand tree nodes; these operations don't actually modify the tree. To collapse or expand a node, click on a selected node or use space or enter keys.

Code

var container = document.querySelector('#test-collapse');
new SVGTree('((B,((F,((M,N,O)K,L)G)D,(H,I)E)C)A;', container, {
    'interaction': ['collapse']
});

Edit Option

To allow editing the tree, set interaction option to 'edit'. This allows editing node tags.

Code

var container = document.querySelector('#test-edit'),
    notation = '((B,((F,((M,N,O)K,L)G)D,(H,I)E)C)A;';
var tree = new SVGTree(notation, container, {
    'interaction': ['edit']
});
document.querySelector('#test-edit-restore').onclick = function() {
    // We can use SVGTree.setContent function to quickly change
    // the entire tree
    tree.setContent(notation);
};

Rearrange Option

If you specify 'rearrange' option in interaction, the sibling nodes can be rearranged by dragging. Note that this option doesn't change the semantics of the tree for most applications.

Code

var container = document.querySelector('#test-rearrange'),
    notation = '((B,((F,((M,N,O)K,L)G)D,(H,I)E)C)A;';
var tree = new SVGTree(notation, container, {
    'interaction': ['rearrange']
});
document.querySelector('#test-rearrange-restore').onclick = function() {
    tree.setContent(notation);
};

Adding and Removing Nodes

To allow adding and removing nodes from the tree, you may use 'add' and 'remove' options, respectively. Nodes can be removed from the tree using delete key and added using insert key. Note that to edit the labels of the newly created nodes, you have to specify 'edit' option together with 'add'.

Code

var container = document.querySelector('#test-add'),
    notation = '((B,((F,((M,N,O)K,L)G)D,(H,I)E)C)A;';
var tree = new SVGTree(notation, container, {
    'interaction': ['add', 'remove', 'collapse']
});
document.querySelector('#test-add-restore').onclick = function() {
    tree.setContent(notation);
};

Drag'n'Drop

Finally, you can allow to drag the nodes of the tree by including 'drag' action into the interaction option. You can select any of the three insertion points for a dragged subtree:

  • before the node
  • after the node
  • as a child of the node

The active insertion point is marked with an arrow pointing in the direction the dragged subtree is going to be inserted.

If you press Ctrl key during drag, the subtree will be copied and not moved.

Code

var container = document.querySelector('#test-drag'),
    notation = '((B,((F,((M,N,O)K,L)G)D,(H,I)E)C)A;';
var tree = new SVGTree(notation, container, {
    'interaction': ['collapse', 'drag', 'remove']
});
document.querySelector('#test-drag-restore').onclick = function() {
    tree.setContent(notation);
};

Drag'n'Drop Between Trees

Note that nodes can be dragged between different trees that support drag-n-drop, e.g. the two trees to the bottom.

Code

var container1 = document.querySelector('#test-drag-2trees-1'),
    notation1 = '((B,((F,((M,N,O)K,L)G)D,(H,I)E)C)A;';
var tree1 = new SVGTree(notation1, container1, {
    'interaction': ['collapse', 'drag', 'remove']
});
var container2 = document.querySelector('#test-drag-2trees-2'),
    notation2 = '((1,2),(3,4),(5,6));';
var tree2 = new SVGTree(notation2, container2, {
    'orientation': 'h',
    'interaction': ['collapse', 'drag', 'remove']
});
document.querySelector('#test-drag-2trees-restore').onclick = function() {
    tree1.setContent(notation1);
    tree2.setContent(notation2);
};

Text Drag'n'Drop

By default, you can drag nodes only within the same tree or between trees on the same page. To allow dragging text from outside sources, set dragAsText option to true. 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.

Note. Due to Microsoft being Microsoft, dragAsText option is effectively always true in Internet Explorer.

Try to drag a node here:

Code

var container = document.querySelector('#test-text-drag'),
    notation = '((B,((F,((M,N,O)K,L)G)D,(H,I)E)C)A;';
var tree = new SVGTree(notation, container, {
    'interaction': ['drag', 'remove'],
    'dragAsText': true
});
document.querySelector('#test-text-drag-restore').onclick = function() {
  tree.setContent(notation);
};

Large Trees

SVGTree can be used to visualize moderately big trees. For example, the tree below has 300 nodes.

Code

// randomTree is a function that generates random trees
// (you can inspect it by viewing the source code of this file).
var container = document.querySelector('#test-max'),
    nodes = 300, // Number of nodes in the tree
    maxChildren = 4, // Maximum number of children of each node
    notation = randomTree(nodes, maxChildren).newick();
var tree = new SVGTree(notation, container, {
    'interaction': ['collapse'],
    'size': 'fit',
    'labelBackgrounds': false
});
document.querySelector('#test-max-gen').onclick = function() {
    tree.setContent(randomTree(nodes, maxChildren).newick());
};