JSFiddle - React, Tailwind, and code Playground

by gdicerbo

HTML

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
    .node circle {
        stroke-width: 8px;
    }
    
    .node text {
        font: 12px sans-serif;
        fill: #000;
        text-anchor: middle; /* Centers the text horizontally */
    }
    
    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 4px;
    }
</style>

<body>

    <!-- load the d3.js library -->
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>

var treeData =
  {
    "name": "Bid Stage/Type",
    "children": [
      { 
        "name": "Binding",
      },
      { "name": "Non-Binding",
      "children": [
          { "name": "NODE NAME 3.3","fill":"blue","subname": "CODE N1",
           "children": [{
               "name":"NODE NAME 4.1","subname": "CODE N1",
               "fill":"#d281d2"
           }
               ] },
          { "name": "NODE NAME 3.4","fill":"blue", "subname": "CODE N1" ,
           "children": [{
               "name":"NODE NAME 4.2", "subname": "CODE N1" ,
               "fill":"#d281d2"
           }
               ]
           }
        ]
        }
    ]
  };

// Set the dimensions and margins of the diagram
var margin = {top: 50, right: 50, bottom: 50, left: 90},
    width = 2060 - margin.left - margin.right,
    height = 900 - margin.top - margin.bottom;

// append the svg object to the body of the page
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 = 950,
    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);

update(root);

// Collapse the...