Press "Enter" to skip to content

Javascript Library to Create Family Trees in HTML/JSON | treeMaker

TreeMaker is a JavaScript library that allows you to create an HTML tree from JSON that displays a tree-like diagram from JSON or JS objects to show the structure and relationship in an organization/agency.

How to make use of it:

1. Insert the minified version of the treeMaker into the doc.

<link rel="stylesheet" href="tree_maker-min.css">
<script src="tree_maker-min.js"></script>

2. Create a container wherein the tree diagram will render from the information you provide.

<div id="myTree"></div>

3. Build a tree structure.

let tree = {
    1: {
        2: '',
        3: {
            6: '',
            7: '',
        },
        4: '',
        5: ''
    }
};

4. Define the information to be stuffed within the tree structure.

let treeParams = {
    1: {trad: 'JavaScript'},
    2: {trad: 'jQuery'},
    3: {trad: 'React'},
    4: {trad: 'Angular'},
    5: {trad: 'Vue.js'},
    6: {trad: 'ReactJS'},
    7: {trad: 'Web Code Flow'}
};

5. Generate a tree diagram on the web page.

treeMaker(tree, {
  id: 'myTree'
  treeParams: treeParams
});

6. Do some stuff because the visitor clicks on a node.

treeMaker(tree, {
  id: 'myTree'
  treeParams: treeParams,
  card_click: function (element) {
    console.log(element);
  }
});

7. Customize the strains between nodes.

treeMaker(tree, {
  id: 'myTree'
  treeParams: treeParams,
  link_width: '4px',
  link_color: '#2199e8'
});

Render Family/Organization Tree From JSON, treeMaker Plugin/Github

Family-treeMaker-Demo


See Demo And Download

Official Website(Remi-Leclercq-Blondel): Click Here

This superior jQuery/javascript plugin is developed by Remi-Leclercq-Blondel. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *