JSFiddle - React, Tailwind, and code Playground

HTML

<script src="d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
<body>
  <div id="d3_object">
    <object>
      <p>apple</p>
      <div id="includedContent"></div>
      <p>banana</p>
    </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")

var svg = d3.select("#includedContent").append("svg")
  .attr("width", width + margin.right + margin.left)
  .attr("height", height + margin.top + margin.bottom)
  // d3.js v4, v5:
  // .call(d3.zoom().on("zoom", function () {
  //   svg.attr("transform", d3.event.transform)
  // d3.js v6:
  .call(d3.zoom().on("zoom", function(event) {
    svg.attr("transform", 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) {

// ----------------------------------------
// d3.js v4 [ https://d3js.org/d3.v4.min.js ]
/*
  d3.json("https://gist.githubusercontent.com/victoriastuart/abbcf355bf1590be02f6dec297be2706/raw/2418e5f6b7626b3c5842665a51b7d0d27f74e909/ontology_for_d3_test.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);
  });
*/
// ----------------------------------------

// ----------------------------------------
// d3.js v5   https://d3js.org/d3.v5.min.js
//           ...