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.

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

AuthorLinksMade withLast update
deltossOffice HomeJavaScriptSep 17, 2020

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();

Leave a Reply

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