JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
        <svg id="svg-canvas" width=500 height=1000>
            <g transform="translate(40, 30)" />
        </svg>

CSS

text {
    font-weight: 300;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serf;
    font-size: 14px;
}
.node rect {
    stroke: #999;
    fill: #fff;
    stroke-width: 1.5px;
}
.edgePath path {
    stroke: #333;
    stroke-width: 1.5px;
    cursor: pointer;
}
.node {
    cursor: pointer;
}

JavaScript

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({})
    .setDefaultEdgeLabel(function () {
    return {};
});

//adding nodes and edges

g.setNode(0, {
    label: "dads dad",
});
g.setNode(1, {
    label: "dads ma",
});
g.setNode(2, {
    label: "dad",
});
g.setNode(3, {
    label: "mom",
});
g.setNode(4, {
    label: "moms dad",
});
g.setNode(5, {
    label: "moms ma",
});
g.setNode(6, {
    label: "me",
});
g.setNode(7, {
    label: "wife",
});
g.setNode(8, {
    label: "child1",
});
g.setNode(9, {
    label: "child2",
});
g.setNode(10, {
    label: "child3",
});
g.setNode(11, {
    label: "child4",
});
g.setNode(12, {
    label: "childschild",
});
g.setNode(13, {
    label: "childs child child",
});
g.setNode(14, {
    label: "childs child bro)))ппц",
});


g.setEdge(0, 2);
g.setEdge(1, 2);
g.setEdge(4, 3);
g.setEdge(5, 3);
g.setEdge(2, 6);
g.setEdge(3, 6);
g.setEdge(6, 8);
g.setEdge(7, 8);
g.setEdge(6, 9);
g.setEdge(7, 9);
g.setEdge(6, 10);
g.setEdge(7, 10);
g.setEdge(6, 11);
g.setEdge(7, 11);
g.setEdge(9, 12);
g.setEdge(12, 13);
g.setEdge(12, 14);


// Round the corners of the nodes
g.nodes().forEach(function (v) {
    var node = g.node(v);
    node.rx = node.ry = 5;
});

//makes the lines smooth
g.edges().forEach(function (e) {
    var edge = g.edge(e.v, e.w);
    edge.lineInterpolate = 'basis';
});

// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
    inner = svg.append("g");

// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function () {
    inner.attr("transform", "translate(" + d3.event.translate + ")" +
        "scale(" + d3.event.scale + ")");
});
svg.call(zoom);

// Run the renderer. This is what draws the final graph.
render(inner, g);

// Center the graph
var initialScale = 1.0;
zoom.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
    .scale(initialScale)
   ...