JSFiddle - React, Tailwind, and code Playground

by mj58659094

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 .normal rect {
  fill: #bdbdbd;
  stroke: none;
}
.node .selected rect {
  fill: none;
  stroke: #9B0000;
  stroke-width: 3;
}
.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,
    gapBetweenParentChild: 350,
    gapBetweenSpouses: 70,
    margin: {top:0, right:20, bottom:0, left:20},
    treeData:
    {
      "personId": "1000001",
      "personFullName": "Father-0 (PMI)",
      "personGenderId": 1,
      "personLivingOrDiedId": 2,
      "personSelected": true,
      "personNickName": "(PMI Nickname)",
      "personSpouses": [
        {
          "personId": "1000002",
          "personFullName": "Mother-0 (MP)",
          "personGenderId": 0,
          "personSelected": false
        }
      ],
      "personChildren": [
        {
          "personId": "1000003",
          "personFullName": "Father 1 (YMP)",
          "personGenderId": 1,
          "personSelected": false,
          "personSpouses": [
            {
              "personId": "1000004",
              "personFullName": "Mother-1 (MY)",
              "personGenderId": 0,
              "personSelected": false
            }
          ],
          "personChildren": [
            {
              "personId": "1000023",
              "personFullName": "Father-2 (JMJ)",
              "personGenderId": 1,
              "personSelected": false,
              "personNickName": "(JMJ Nickname)",
              "personPictureFileName": "M1000002.jpg",
              "personSpouses": [
                {
                  "personId": "1000024",
                  "personFullName": "Mother-2 (MAJ)",
                  "personGenderId": 0,
                  "personSelected": false,
                  "personPictureFileName": "M1000003.jpg"
                }
              ]
            }
          ]
        },
        {
          "personId": "1000700",
          "personFullName": "Father-1 (PMP)",
          "personGenderId": 1,
          "personSelected": false,
          "personSpouses": [
            {
  ...