JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

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: [{
                 ...