Create SVG Based Tree Structure Using JavaScript – SVGTree

Category: Javascript | July 5, 2015
Views Total:6,978 views
Official Page:Go to website
Last Update:July 5, 2015


Create SVG Based Tree Structure Using JavaScript – SVGTree


SVGTree is a simple yet robust JavaScript library for rendering scalable,interactive trees using SVG element.

Basic usage:

Import the SVGTree.js and SVGTree.css into the html page.

<link rel="stylesheet" href="svgtree.css">
<script src="svgtree.js"></script>

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.

(function() {
    // 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 \.

(function() {
    var container = document.querySelector('#test-newick'),
        options = {
            'leafDistance': 50 // widen the tree a little

    new SVGTree('(s\l\a\sh\\\\,node,(node 2,comma \\,)\\(parentheses\\))root;', 
        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.

(function() {
    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).

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

Default options for SVGTree initialization.

// Determines the orientation of the tree.
'orientation': 'v',

// Determines the shape of node markers. 
// Allowed values are 'circle' and 'square'.
'nodes': 'circle',

// Determines the shape of edges in the tree. 
// Allowed values are 'straight' and 'angular'.
'edges': 'angular',

'leafDistance': 40,
'depthDistance': 50,
'padding': 30,
'size': 'keep',

// Determines how a user can interact with the tree.
// 'collapse' - user can collapse and expand nodes
// 'rearrange' - user can rearrange siblings
// 'edit' - user can edit node labels
// 'add' - user can add new nodes into the tree by pressing insert key
// 'remove' - user can remove nodes from the tree by pressing delete key
// 'drag' - 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)
'interaction': false,

// Allows to drag text from outside sources. 
'dragAsText': false,

'targetSize': 25,

'summary': function(node) {
  var nDescendants = node.queue().length - 1;
  return '(' + nDescendants + ')';

// Event listeners
'onrender': function() { },
'onselect': function(node) { },
'onchange': function() { }

You Might Be Interested In:

Leave a Reply