Generate Responsive Customizable Tree Diagrams To Visualize Hierarchies – Tree.js

Category: Chart & Graph , Javascript | February 25, 2024
Author:williamtroup
Views Total:47 views
Official Page:Go to website
Last Update:February 25, 2024
License:MIT

Preview:

Generate Responsive Customizable Tree Diagrams To Visualize Hierarchies – Tree.js

Description:

Tree.js is a lightweight JavaScript library that allows you to create responsive and customizable interactive tree diagrams from an array of JS objects.

It is ideal for visualizing any data with parent-child relationships, such as organization charts, folder structures, decision trees, and more. Compared to other libraries, Tree.js focuses on being lightweight, configurable, and easy to theme.

Its built-in API enables complete control over node formats, tooltips, interactivity, and other aspects of the tree view. Since styling uses CSS/SASS, you can easily customize colors, fonts, etc.

How to use it:

1. Download the package and load the following files in the document.

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

2. Create a DIV container for the tree diagram and pass the options to the data-tree-options attribute. All possible options:

  • data: []
  • maximumRows: 10
  • spacing: 10
  • maximumBoxHeight: 200
  • reverseOrder: false
  • showBoxGaps: true
  • swapSizes: false
  • showBoxGapsForChildren: false
  • allowBoxExpanding: true
  • showTitle: true
  • showChildren: true
  • showDescriptions: true
  • showContents: true
  • tooltipDelay: 750
  • showChildrenToggle: true
  • showDescriptionsToggle: true
  • showContentsToggle: true
  • showCategorySelector: true
  • showCategorySelectionDropDown: true
  • useDecreasingHeightsForBoxes: true
  • showRefreshButton: false
  • onBeforeRenderComplete( element ): null
  • onRenderComplete( element ): null
  • onBoxClick( boxDetails ): null
  • onBackCategory( category ): null
  • onNextCategory( category ): null
  • onSetCategory( category ): null
  • onRefresh( element ): null
  • onDestroy( element ): null
<div id="myTree" data-tree-options="{'data': [], 'onRenderComplete': yourCustomJsFunction}">
</div>

3. The data array should be like these:

{
  id: "1",
  name: "Data Set 1",
  description: "Description 1.",
  backgroundColor: "rgba(255, 255, 255, 1 )",
  textColor: "black",
  borderColor: "rgba(0, 0, 0, 0.75 )",
  value: 10,
  category: category,
  showValue: true,
  children: [
    // sub items here
  ],
  content: "Additional Content in HTML." 
};

4. Available configurations.

$tree.setConfiguration({
  backButtonText: "Back",
  nextButtonText: "Next",
  showChildrenLabelText: "Show Children",
  showDescriptionsLabelText: "Show Descriptions",
  showContentsLabelText: "Show Contents",
  noDataMessage: "There is currently no data to view.",
  expandToolTipText: "Expand",
  contractToolTipText: "Contract",
  safeMode: true,
  highlightAllDomElementTypes: "*",
  refreshButtonText: "Refresh"
})

5. API methods.

// refresh
$tree.refresh(elementId)
// refresh all instance
$tree.refreshAll()
// move to the prev category
$tree.moveToPreviousCategory(elementId)
// move to the next category
$tree.moveToNextCategory(elementId)
// get ids
$tree.getIds()
// destroy the instance
$tree.destroy()
// destroy all instances
$tree.destroyAll()

Changelog:

v0.4.0 (02/25/2024)

  • Added new callbacks, and methods.

v0.3.0 (02/20/2024)

  • Added new options, callbacks, and methods.

You Might Be Interested In:


Leave a Reply