SVGTree

The examples on this page showcase the basic functionality of the trees made with SVGTree Viewer plug-in.

Code

var container = document.getElementById('test-basic');
new SVGTreeViewer('((A,B),(C,D)F)E;', container, {
    'interaction': ['collapse', 'add', 'remove', 'edit', 'drag'],
    'newick': false,
    'undo': false
});

You can disable undo, settings and / or Newick notation buttons by specifying appropriate boolean options (undo, settings, newick).

Code

var container = document.getElementById('test-buttons');
new SVGTreeViewer('((A,B),(C,D)F)E;', container, {
    'interaction': ['collapse', 'add', 'remove', 'edit', 'drag'],
    'newick': false,
    'undo': false
});

You can specify the size of a widget using width and / or height styles (e.g., using <div ... style="width: 500px; height: 500px;">). Note that for the optimal layout, the width and the height of the widget should be no less than 300px.

Code

var container = document.getElementById('test-size');
new SVGTreeViewer('((A,B),(C,D)F)E;', container, {
    'interaction': false
});

For large trees, there is a useful Locate button which centers the displayed area of the tree on the selected node.

Generate a tree

Code

var container = document.querySelector('#test-locate'),
    nodes = 300, // Number of nodes in the tree
    maxChildren = 4, // Maximum number of children of each node
    notation = randomTree(nodes, maxChildren).newick();
var viewer = new SVGTreeViewer(notation, container, {
    'interaction': ['collapse', 'add', 'remove', 'edit', 'drag'],
    'labelBackgrounds': false
});
document.querySelector('#test-locate-gen').onclick = function() {
   viewer.tree.setContent(randomTree(nodes, maxChildren).newick());
};