JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div id="ft_svg_div"></div>

</body>

CSS

.node {
  cursor: pointer;
}
.link,
.node rect {
  fill: none;
  stroke-width: 1.5px;
  stroke: #636363;
}
.link {
  stroke: #969696;
}
.node rect {
  fill: white;
}
.link path,
.node rect,
.node text {
  -moz-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
}
.node rect.normal {
  fill: #bdbdbd;
  stroke: none;
}
.node rect.selected {
  fill: none;
  stroke-width: 3;
  stroke: #9b0000;
}
.node .data rect {
  stroke: #3182bd;
}
.node .datum rect {
  fill: #d9d9d9;
  stroke: none;
}
.node .null rect {
  fill: none;
  stroke: none;
}
.node .null text {
  fill: #636363;
}
.node .code text {
  font-family: monospace;
}
.node .key rect {
  fill: #a1d99b;
  stroke: none;
}
.link .to-key {
  stroke: #a1d99b;
}
.link .to-null {
  stroke-dasharray: 0.5, 3.5;
  stroke-linecap: round;
}
.link .from-data {
  stroke: #3182bd;
}
code span {
  -moz-transition: background 250ms linear;
  -ms-transition: background 250ms linear;
  -o-transition: background 250ms linear;
  -webkit-transition: background 250ms linear;
  transition: background 250ms linear;
}

JavaScript

(function () {

  d3.familyTree = {
    rootGeneration: 0,
    roundedCorner: 6,
    svgCanvasMinimumWidth: 400,
    generationWidth: 300,
    normalNodeWidth: 240,
    normalNodeHeight: 45,
    gapBetweenGenerations: 350,
    gapBetweenSpouses: 70,
    margin: {
      top: 0,
      right: 20,
      bottom: 0,
      left: 20
    },
    treeData:
    {
      "personId": "1000001",
      "personFullName": "Father-0 (PMI)",
      "personGenderId": 1,
      "personSelected": true,
      "personNickName": "(PMI Nickname)",
      "personSpouses": [
        {
          "personId": "1000002",
          "personFullName": "Mother-0 (MP)",
          "personGenderId": 2,
          "personSelected": false,
          "personNumber": 1
        }
      ],
      "personChildren": [
        {
          "personId": "1000101",
          "personFullName": "Father-3 (SMJ)",
          "personGenderId": 1,
          "personSelected": false,
          "personSpouses": [
            {
              "personId": "1000102",
              "personFullName": "Mother-3 (AJ)",
              "personGenderId": 2,
              "personSelected": false,
              "personNumber": 1,
              "personNickName": "(AJ Nickname)"
            },
            {
              "personId": "1000103",
              "personFullName": "Mother-3 (MTJ)",
              "personGenderId": 2,
              "personSelected": false,
              "personNumber": 2,
              "personNickName": "(MTJ Nickname)"
            }
          ],
          "personChildren": [
            {
              "personId": "1000329",
              "personFullName": "Father-4 (MJ)",
              "personGenderId": 1,
              "personSelected": false,
              "personNickName": "(MJ Nickname)",
              "personSpouses": [
                {
                  "personId": "1000330",
                  "personFullName": "Mother-4 (AJ)",
                  "personGenderId": 2,
                  "personSelected": false,
   ...