JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v2.min.js"></script>
      <div id='canvas'></div>

CSS

#canvas {width: 1280px; height: 600px}
g.person rect { stroke: #000; fill: white}
path.child { stroke: #000}
path.partner { stroke: #800}
text { fill: #000; font-size: 12px; font-family: Arial}

JavaScript

// The array sent by the server.
// We need such an array for d3js, but we also build a graph below for easier
// access to person data

var tree = [
    { "id": 1, "name": "Me", "dob": "1988", "children": [4, 5], "partners" : [2,3]},
    { "id": 2, "name": "Mistress 1", "dob": "1987", "children": [4], "partners" : [1]},
    { "id": 3, "name": "Wife 1", "dob": "1988", "children": [5], "partners" : [1]},
    { "id": 4, "name": "son 1", "dob": "", "children": [], "partners" : []},
    { "id": 5, "name": "daughter 1", "dob": "", "children": [7], "partners" : [6]},
    { "id": 6, "name": "daughter 1s boyfriend", "dob": "", "children": [7], "partners" : [5]},
    { "id": 7, "name": "son (bottom most)", "dob": "", "children": [], "partners" : []},
    { "id": 8, "name": "jeff", "dob": "", "children": [1], "partners" : [9]},
    { "id": 9, "name": "maggie", "dob": "", "children": [1], "partners" : [8]},
    { "id": 10, "name": "bob", "dob": "", "children": [8], "partners" : [11]},
    { "id": 11, "name": "mary", "dob": "", "children": [8], "partners" : [10]},
    { "id": 12, "name": "john", "dob": "", "children": [10], "partners" : []},
    { "id": 13, "name": "robert", "dob": "", "children": [9], "partners" : []},
    { "id": 14, "name": "jessie", "dob": "", "children": [9], "partners" : []},
    { "id": 15, "name": "raymond", "dob": "", "children": [14], "partners" : []},
    { "id": 16, "name": "betty", "dob": "", "children": [14], "partners" : []},
];

// A graph computed from the tree data. This graph is slightly higher level,
// since we create one "meta node" for each father+mother child (or rather to
// the meta node child+spouse). This does not represent accurate genealogical
// data, but makes a depth-first-search to order the nodes more relevant, since
// it makes sure that all children are seen before all parents;
//     This maps a id to the corresponding index in `tree`

var graph = {};
var node_width = 130;
var node_height = 20;
var horiz_margin = 20;
var...