JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.block {
    width: 100px;
    height: 90px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 1;
    position: absolute;
}

#inner-canvas {
  /*
    width:5000px;
    height: 5000px;
    position: absolute;
    */
    overflow:auto;
}

#wrap {
    width: 100%;
    height: 100%;
    /*
    position: absolute;
    overflow: hidden;
    */
}

.active { border: 3px solid #000; }

JavaScript

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


function getNodeById(id) {
    var temp = tree.filter(function(el) { return el.id == id });
    return temp.length ? temp[0] : null; 
}   

function getRoot() {
    return tree.filter(function(node) { 
      ...