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

See the demo for the examples of usage.

Recognized options:

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

See the viewer demo for the examples of usage.

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