Tree.js
🌲 A lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.
v0.4.0
What features does Tree.js have?
- Zero-dependencies and extremely lightweight!
- Full API available via public functions.
- Fully styled in CSS/SASS, fully responsive, and compatible with the Bootstrap library.
- Full CSS theme support (using :root variables).
- Fully configurable per DOM element.
- Toggling data on/off support.
- Customizable tooltips.
- Expand/Contract data items.
- Configurable colors for boxes!
What browsers are supported?
All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
What are the most recent changes?
To see a list of all the most recent changes, click here.
How do I install Tree.js?
You can install the library with npm into your local modules directory using the following command:
npm install jtree.jsHow do I get started?
To get started using Tree.js, do the following steps:
1. Prerequisites:
Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:
<!DOCTYPE html>2. Include Files:
<link rel="stylesheet" href="dist/tree.js.css">
<script src="dist/tree.js"></script>3. DOM Element Binding:
<div id="tree-1" data-tree-options="{ 'showBoxGaps': true, 'data': [] }">
Your HTML.
</div>To see a list of all the available binding options you can use for "data-tree-options", click here.
To see a list of all the available custom triggers you can use for "data-tree-options", click here.
4. Finishing Up:
That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
How do I go about customizing Tree.js?
To customize, and get more out of Tree.js, please read through the following documentation.
1. Public Functions:
To see a list of all the public functions available, click here.
2. Configuration:
Configuration options allow you to customize how Tree.js will function. You can set them as follows:
<script>
$tree.setConfiguration( {
safeMode: false
} );
</script>To see a list of all the available configuration options you can use, click here.