Skip to content

Instantly share code, notes, and snippets.

@gschrader
Last active December 27, 2015 00:58
Show Gist options
  • Save gschrader/7241072 to your computer and use it in GitHub Desktop.
Save gschrader/7241072 to your computer and use it in GitHub Desktop.
Dagre Edge Issue
<!DOCTYPE html>
<meta charset="utf-8">
<title>Dagre Edge Issue</title>
<style>
rect {
fill: #fff;
}
.node rect {
stroke-width: 1.5px;
stroke: #333;
fill: none;
}
.edge rect {
fill: #fff;
}
.edge path {
fill: none;
stroke: #333;
stroke-width: 1.5px;
}
</style>
<body onLoad="tryDraw();">
<svg width=650 height=680>
<g transform="translate(20,20)"/>
</svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script type="text/javascript">
function tryDraw() {
var g = new dagreD3.Digraph();
g.addNode("a", { label: "A" });
g.addNode("b", { label: "B" });
for (var i = 0; i < 50; i++) {
g.addEdge(null, "a", "b", { label: "Edge: " + i });
}
var renderer = new dagreD3.Renderer();
var layout = dagreD3.layout()
.nodeSep(20)
.rankDir("LR");
renderer.layout(layout).run(g, d3.select("svg g"));
var svg = d3.select("svg");
var bb = svg.node().getBBox();
svg.attr("width", bb.width + 40);
svg.attr("height", bb.height);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment