JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<svg width="1000" height="1000">
<g></g>
</svg>
CSS
body {
font: 300 14px 'Helvetica Neue', Helvetica;
}
.node rect {
stroke: #333;
fill: #fff;
}
.edgePath path {
stroke: #333;
fill: #333;
stroke-width: 1.5px;
}
JavaScript
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});
var nodes = [ "10007154_1100", "148570017_1100", "148570018_1100", "148570019_1100",
"148570025_1100", "148570010_1100", "148570021_1100", "148570020_1100",
"148570026_1100", "148570011_1100", "148570022_1100", "148570010_1200", "148570020_1200", "148570026_1200", "148570023_1100", "148570011_1200",
"148570023_1200"
];
// Automatically label each of the nodes
nodes.forEach(function(node) {
g.setNode(node, { label: node });
});
// Set up the edges
g.setEdge("10007154_1100", "148570017_1100", { label: "" });
g.setEdge("148570017_1100", "148570018_1100", { label: "" });
g.setEdge("148570018_1100", "148570019_1100", { label: "" });
g.setEdge("148570018_1100", "148570025_1100", { label: "" });
g.setEdge("148570019_1100", "148570020_1100", { label: "" });
g.setEdge("148570019_1100", "148570021_1100", { label: "" });
//put this line above line :22 to mess the graph up
g.setEdge("148570019_1100", "148570010_1100", { label: "" });
g.setEdge("148570025_1100", "148570010_1100", { label: "" });
g.setEdge("148570025_1100", "148570026_1100", { label: "" });
g.setEdge("148570021_1100", "148570022_1100", { label: "" });
g.setEdge("148570010_1100", "148570011_1100", { label: "" });
g.setEdge("148570010_1100", "148570010_1200", { label: "" });
g.setEdge("148570020_1100", "148570020_1200", { label: "" });
g.setEdge("148570026_1100", "148570026_1200", { label: "" });
g.setEdge("148570026_1200", "148570011_1200", { label: "" });
g.setEdge("148570010_1200", "148570011_1200", { label: "" });
g.setEdge("148570022_1100", "148570023_1100", { label: "" });
g.setEdge("148570023_1100", "148570023_1200", { label: "" });
var svg = d3.select("svg"),
inner = svg.select("g");
// Set the rankdir
g.graph().rankdir = "TB";
g.graph().nodesep = 60;
// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
...