JSFiddle - React, Tailwind, and code Playground

by vstuart

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <div id="d3_object">
    <object>
      <div id="includedContent"></div>
    </object>
  </div>
  
 <!-- **********************************
       hyperlink here to open d3.js node
       e.g. "data"
       *********************************-->
</body>

CSS

.node {
      cursor: pointer;
    }

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

    .node text {
      font: 12px sans-serif;
    }

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

    #d3_object {
      width: 75%;
      margin: 0.5rem 0.5rem 1rem 0.25rem;
    }

    #includedContent {
      position: static !important;
      display: inline-block;
    }

JavaScript

// Set the dimensions and margins of the diagram
  var margin = {top: 20, right: 90, bottom: 30, left: 90},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  // ----------------------------------------
  /* Pan, zoom! */
  // https://www.d3-graph-gallery.com/graph/interactivity_zoom.html
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
      .call(d3.zoom().on("zoom", function () {
        svg.attr("transform", d3.event.transform)
      }))
    .append("g")
      .attr("transform", "translate("
            + margin.left + "," + margin.top + ")");
// ----------------------------------------

  var i = 0,
      duration = 250,
      root;

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

  // load the external data
  d3.json("https://gist.githubusercontent.com/mbostock/4339083/raw/9585d220bef18a0925922f4d384265ef767566f5/flare.json", function(error, treeData) {
    if (error) throw error;

    // 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 node and all it's children
  function collapse(d) {
    if(d.children) {
      d._children = d.children
      d._children.forEach(collapse)
      d.children = null
    }
  }

  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 =...