JSFiddle - React, Tailwind, and code Playground

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: "John",
            id: 16,
            no_parent: true
        },
{
        name: "",
        id: 2,
        no_parent: true,
        hidden: true,
        children: [
        { name: "Hidden Son", id:9001 },

{
            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",
...