JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre/latest/dagre.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
<svg id='svg' width=650 height=680>
    <g transform="translate(20,20)"/>
</svg>

CSS

svg {
    overflow: hidden;
}

.node rect {
    stroke: #333;
    stroke-width: 1px;
    fill: #fff;
}

.edgeLabel rect {
    fill: #fff;
}

.edgePath {
    stroke: #333;
    stroke-width: 1px;
    fill: none;
}

JavaScript

var svg = document.getElementById('svg');

svg.style.width = window.innerWidth - 40 + 'px';
svg.style.height = window.innerHeight - 40 + 'px';

// Create a new directed graph
var g = new dagreD3.Digraph();

// Add nodes to the graph. The first argument is the node id. The second is
// metadata about the node. In this case we're going to add labels to each of
// our nodes.
g.addNode("kspacey",    { label: "Kevin Spacey" });
g.addNode("swilliams",  { label: "Saul Williams" });
g.addNode("bpitt",      { label: "Brad Pitt" });
g.addNode("hford",      { label: "Harrison Ford" });
g.addNode("lwilson",    { label: "Luke Wilson" });
g.addNode("kbacon",     { label: "Kevin Bacon" });

// Add edges to the graph. The first argument is the edge id. Here we use null
// to indicate that an arbitrary edge id can be assigned automatically. The
// second argument is the source of the edge. The third argument is the target
// of the edge. The last argument is the edge metadata.
g.addEdge(null, "kspacey",   "swilliams", { label: "K-PAX" });
g.addEdge(null, "swilliams", "kbacon",    { label: "These Vagabond Shoes" });
g.addEdge(null, "bpitt",     "kbacon",    { label: "Sleepers" });
g.addEdge(null, "hford",     "lwilson",   { label: "Anchorman 2" });
g.addEdge(null, "lwilson",   "kbacon",    { label: "Telling Lies in America" });

var renderer = new dagreD3.Renderer();
// Disable the edge crossing minimization ordering
renderer.layout(dagre.layout().orderIters(-1));
// Enable a transition
renderer.transition(function(selection) {
    return selection.transition().duration(500);
});

var render = function() {
    renderer.run(g, d3.select("svg g"));
};

render();

svg.onclick = function(evt) {
    var nodeId = evt.target.__data__;
    for (var i = 0; i <= Math.random() * 10; ++i) {
        var newNodeId = nodeId + "_sub" + i;
        g.addNode(newNodeId, { label: "Bla" });
        g.addEdge(null, newNodeId, nodeId);
    }
    render();
};