JSFiddle - React, Tailwind, and code Playground

by Loxos

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: "TOP",
});
g.setNode(1, {
    label: "S",
});
g.setNode(2, {
    label: "NP",
});
g.setNode(3, {
    label: "DT",
});
g.setNode(4, {
    label: "This",
});
g.setNode(5, {
    label: "VP",
});
g.setNode(6, {
    label: "VBZ",
});
g.setNode(7, {
    label: "is",
});
g.setNode(8, {
    label: "NP",
});
g.setNode(9, {
    label: "DT",
});
g.setNode(10, {
    label: "an",
});
g.setNode(11, {
    label: "NN",
});
g.setNode(12, {
    label: "example",
});
g.setNode(13, {
    label: ".",
});
g.setNode(14, {
    label: "sentence",
});

g.setEdge(3, 4, {label:'test'});
g.setEdge(2, 3);
g.setEdge(1, 2);
g.setEdge(6, 7);
g.setEdge(5, 6);
g.setEdge(9, 10);
g.setEdge(8, 9);
g.setEdge(11, 12);
g.setEdge(8, 11);
g.setEdge(5, 8);
g.setEdge(1, 5);
g.setEdge(13, 14);
g.setEdge(1, 13);
g.setEdge(0, 1);

// 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)
    .event(svg);
svg.attr("height", g.graph().height * initialScale + 40);


//code for drag

//give IDs to each of the nodes so that...