SVGTree

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

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

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

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

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

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

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

Restore original tree

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

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.

Restore original tree

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

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'.

Restore original tree

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

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.

Restore original tree

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

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:

Restore original tree

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