// Define a tree element where dimensions are mandatory
<div id="tree" style="height:700px; width:900px"></div>

<script>
// Define a dataset
var data = [
  { id: 1, text_1: "Father", father: null },
  { id: 2, text_1: "Child A", father: 1 },
  { id: 3, text_1: "Child B", father: 1 },
  { id: 4, text_1: "Subchild C", father: 2 }
];

// Define and configure a tree object
var myTree = Treeviz.create({
  htmlId: "tree",
  idKey: "id",
  hasFlatData: true,
  nodeColor: (nodeData) => "grey",
  relationnalField: "father",
});

// Display the tree based on the data
myTree.refresh(data);
</script>

To update the tree visually you will just have to pass new data to the refresh method like this :

myTree.refresh(data);
myTree.refresh(data_update1);
myTree.refresh(data_update2);

The tree will be clever enough to updates only the part of the trees that have been added or removed in the dataset, and so it won't redraw the entire tree.

Treeviz Example

var hierarchical_data_example = {
  name: "Mom",
  qty: 10,
  children: [
    { name: "Son A", qty: 3 },
    { name: "Son B", qty: 7 },
  ],
};

var myTree = Treeviz.create({
  htmlId: "tree",
  idKey: "name",
  hasFlatData: false,
  relationnalField: "children",
});

myTree.refresh(hierarchical_data_example);

The big part of the API is configuring the tree before passing data to it :

Treeviz.create(config);

The table below lists all the avalaible key that the config object can have

And then, we have the NodeData type that is passed as callback of some functions: type NodeData { data: // the data of each item settings: // the settings object }

• Clone the repo.
• Run npm install.
• Run npm run dev, then you can edit the files in the ./src folder and the ./example/index.html file.
• To publish (admin rights), run npm run build && npm publish.

This module is based on d3 library, credit to all the contributors of this project.

MIT