JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<div id="graph"></div>

CSS

body {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #000;
}

.sibling {
  fill: none;
  stroke: blue;
}

.border {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #aaa;
}

.node {
  stroke: red;
  fill: white;
}

JavaScript

var margin = {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
  },
  width = 840,
  height = 600;

var kx = function (d) {
  return d.x - 20;
};

var ky = function (d) {
  return d.y - 10;
};

//thie place the text x axis adjust this to center align the text
var tx = function (d) {
  return d.x - 3;
};

//thie place the text y axis adjust this to center align the text
var ty = function (d) {
  return d.y + 3;
};

//make an SVG
var svg = d3.select("#graph").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//My JSON note the 
//no_parent: true this ensures that the node will not be linked to its parent
//hidden: true ensures that the nodes is not visible.
var root = {
  name: "",
  id: 1,
  hidden: true,
  children: [{
    name: "Mistress",
    id: 9000,
    no_parent: true
  }, {
    name: "",
    id: 100,
    no_parent: true,
    hidden: true,
    children: [{
      name: "Hidden Son",
      id: 9001
    }]
  }, {
    name: "John",
    id: 16,
    no_parent: true
  }, {
    name: "",
    id: 2,
    no_parent: true,
    hidden: true,
    children: [


      {
        name: "Jeezy",
        id: 12,

      }, {
        name: "Leo",
        id: 13,
        no_parent: true
      }, {
        name: "Chopper",
        id: 3
      }, {
        name: "",
        id: 4,
        hidden: true,
        no_parent: true,
        children: [{
          name: "Dino",
          id: 5,
        }, {
          name: "",
          id: 14,
          hidden: true,
          no_parent: true,
          children: [{
            name: "Percy",
            id: 15,
          }]
        }, {
          name: "EazyE",
          id: 6,
        }]
      }, {
        name: "Khalid",
        id: 11
      }, {
        name: "GFunk",
        id: 7,
        children: [{
          name: "Hobo",
          id: 8,
        }, {
       ...