JSFiddle - React, Tailwind, and code Playground

Tree Chart - D3js Foldable D3js tree chart.

by Graham Dixon

HTML

<script src="//d3js.org/d3.v3.js"></script>
<div id=tree></div>

CSS

html {
  font: 10px sans-serif;
}

svg {
  border: 1px solid silver;
}

.node {
  cursor: pointer;
}

.node circle {
  stroke: steelblue;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: lightgray;
  stroke-width: 1.5px;
}

JavaScript

/*!
 * Script: jquery.buildTree.min.js - v.0.0.1
 * Copyright: (c) 2017 Graham Dixon (assetinfo(MML))
 * Licensed: MIT
 * Requires: jQuery && d3
 */
;
(function (factory) {
        if (typeof define === 'function' && define.amd) {
            // AMD. Register as an anonymous module depending on jQuery and d3
            define(['jqueryui', 'd3'], factory);
        } else {
            // No AMD. Register plugin with global jQuery and d3 objects
            factory(jQuery, d3);
        }
}(function ($, d3) {

    $.fn.buildTree = (function (options) {
        var tree;
        if ($(this).length) {
            if (undefined == $(this).data('tree')) {
                tree = new buildTree(this, options);
                $(this).data('tree', tree);
            } else {
                // do option based functions
                if (typeof options !== 'undefined') {
                    // allow recreate on .buildTree({data:object});
                    if (typeof options['json'] !== 'undefined') {
                        tree = this.data('tree').init(this, options);
                    } else if (options == 'expandAll') {
                        tree = this.data('tree').expandAll();
                    } else if (options == 'collapseAll') {
                        tree = this.data('tree').collapseAll();
                    } else {
                        tree = this.data('tree');
                    }
                } else {
                    tree = this.data('tree');
                }
            }
        }
        // return grid to enable chaining of buildTree functions
        return tree;
    });

    var buildTree = function (el, options) {
        var tree = this;
        // defaults may be overidden with provided options
        var defaults = {
            width: 700,
            height: 650,
            maxLabel: 150,
            duration: 100,
            radius: 5,
            json: {
                "name": "Base",
                "children": [{
    ...