JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

<div id="dectree"></div>

JavaScript

$(document).ready(function () {
       
        var w = 1920,
          h = 1000,
          i = 0,
          duration = 500,
          root;

        var tree = d3.layout.tree()
          .size([h - 300, w - 600]);

        // DIFF: calculate source and target offsets
        // d.height gets set by the wrap() function
        var diagonal = d3.svg.diagonal()
            .source(function (d) {
                return {
                    "x": d.source.x + d.source.height / 2,
                    "y": d.source.y + 170
                };
            })
            .target(function (d) {
                return {
                    "x": d.target.x + d.target.height / 2,
                    "y": d.target.y
                };
            })
            .projection(function (d) {
                return [d.y, d.x];
            });

        var vis = d3.select('#dectree').append("svg:svg")
          .attr("width", w)
          .attr("height", h)
          .append("svg:g")
          .attr("transform", "translate(40, -50)");

        function collapse(d) {
            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }
        }

        // get decision tree data as json
        var treeData = [{
  "name": "Do trainees require direction as to what to do or how to do the task (either before they start or while they are completing it?",
  "choice": "Yes",
  "children": [
    {
      "name": "Can they satisfactorily complete the task assigned to them?",
      "choice": "No",
      "children": [
        {
          "name": "Rating Level 4 - Path A",
          "onclick": "decision('4', 'A')",
          "choice": "Yes",
          "path": "A"
        },
        {
          "name": "How many problems / queries are there that still need to be addressed / resolved to be able to satisfactorily complete the task?",
          "choice": "No",
          "children": [
            {
    ...