d3-mitch-tree | Visualizing Hierarchical Tree Diagram based on D3.js

d3-mitch-tree is a javascript tree view library, it is based on d3.js, which can allow us to visualize the hierarchical tree structures among different objects.

How to visualize the hierarchical tree structures using d3-mitch-tree?

1.Load the d3-mitch-tree js and stylesheet file in html page

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

2. Load d3-mitch-tree default theme styelsheet

<link rel="stylesheet" href="dist/css/d3-mitch-tree-theme-default.min.css">

3.Create tree data using javascript object or array

// flat data
var data = [
    {
      "id": 1,
      "name": "Animals",
      "type": "Root",
      "description": "A living organism that feeds on organic matter"
    },
    {
      "id": 2,
      "parentId": 1,
      "name": "Carnivores",
      "type": "Type",
      "description": "Diet consists solely of animal materials"
    },
    // more data here
]
// nested data
var data = {
    "id": 1,
    "name": "Animals",
    "type": "Root",
    "description": "A living organism that feeds on organic matter",
    "children": [{
        "id": 2,
        "name": "Carnivores",
        "type": "Type",
        "description": "Diet consists solely of animal materials",
        "children": [
          {
            "id": 3,
            "name": "Felidae",
            "type": "Family",
            "description": "Also known as cats",
          }]
    }]
};

4.Create a new d3.mitchTree instance to load tree data

var treePlugin = new d3.mitchTree.boxedTree()
    .setData(data)

5.Set a html container to show tree structures using setElement()

var treePlugin = new d3.mitchTree.boxedTree()
    .setData(data)
    .setElement(document.getElementById("container-element"))

6.Initialize the d3.mitchTree

var treePlugin = new d3.mitchTree.boxedTree()
    .setData(data)
    .setElement(document.getElementById("container-element"))
    .setIdAccessor(function(data) {
      return data.id;
    })
    .setChildrenAccessor(function(data) {
      return data.children;
    })
    .setBodyDisplayTextAccessor(function(data) {
      return data.description;
    })
    .setTitleDisplayTextAccessor(function(data) {
      return data.name;
    })
    .initialize();

7.There are some options to set the  d3.mitchTree instance

var options = {
    data: data,
    element: document.getElementById("example"),
    getId: function (data) {
      return data.id;
    },
    getChildren: function (data) {
      return data.children;
    },
    getBodyDisplayText: function (data) {
      return data.description;
    },
    getTitleDisplayText: function (data) {
      return data.name;
    }
};
var treePlugin = new d3.MitchTree.BoxedTree(options).initialize();