JSFiddle - React, Tailwind, and code Playground

by khurramali51

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>

CSS

.node circle {
   fill: #fff;
   stroke: steelblue;
   stroke-width: 1px;
 }

 .node text { font: 10px sans-serif; }
 .nodeC text {font: 20px sans-serif;}

 .link {
   fill: none;
   stroke: #ccc;
   stroke-width: 15px;
 }

JavaScript

var treeData =
  {
    "name": "Work Flow",
    "children": [
      { 
        "name": "Amir Khan: 45",
        "children": [
          						{ "name": "Completed : 30" },
          						{ "name": "Hold : 5" },
          						{ "name": "In Progress: 10"}
        						]
      },
      {
      "name": "Shazia Khan: 50",
        "children": [
          						{ "name": "Completed : 40" },
          						{ "name": "Hold : 5" },
          						{ "name": "In Progress: 50"}
        						]
       },
    ]
  };

var margin = {top: 20, right: 90, bottom: 30, left: 90},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate("+ margin.left + "," + margin.top + ")");

var i = 0,
    duration = 750,
    root;



// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);

// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) {  return d.children; });
root.x0 = height / 2;
root.y0 = 0;

// Collapse after the second level
//root.children.forEach(collapse);
collapseAll();
update(root);


// Collapse the node and all it's children
function collapse(d) {
    
 if(d.children)
   {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
   }
 }

function collapseAll() {
	root.children.forEach(collapse);
	//update(root);
}


function update(source) {

  // Assigns the x and y position for the nodes
  var treeData = treemap(root);

  // Compute the new tree layout.
  var nodes = treeData.descendants(),
      links = treeData.descendants().slice(1);

  // Normalize for fixed-depth.
  nodes.forEach(function(d){ d.y = d.depth * 180});

  // ****************** Nodes section ***************************

  // Update the nodes...
  var node =...