Example showing bug in d3-graphviz version 1.0.1
Growing edges start growing from the wrong position when start node shape is a polygon
Edge a -> b has the problem, while edge c -> d does not.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="//d3js.org/d3.v4.min.js"></script> | |
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script> | |
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script> | |
<div id="graph"></div> | |
<script> | |
var dotIndex = 0; | |
var graphviz = d3.select("#graph").graphviz() | |
.transition(function () { | |
return d3.transition("main") | |
.ease(d3.easeLinear) | |
.delay(500) | |
.duration(1500); | |
}) | |
// .logEvents(true) | |
.fade(false) | |
.on("initEnd", render); | |
function render() { | |
var dotLines = dots[dotIndex]; | |
var dot = dotLines.join(''); | |
graphviz | |
.renderDot(dot) | |
.on("end", function () { | |
dotIndex = (dotIndex + 1) % dots.length; | |
if (dotIndex != 0) | |
render(); | |
}); | |
} | |
var dots = [ | |
[ | |
'digraph {', | |
' node [style="filled"]', | |
' a [fillcolor="#d62728", shape="box"]', | |
' b [fillcolor="#1f77b4"]', | |
' c [fillcolor="#2ca02c"]', | |
' d [fillcolor="#ff7f0e"]', | |
'}' | |
], | |
[ | |
'digraph {', | |
' node [style="filled"]', | |
' a [fillcolor="#d62728", shape="box"]', | |
' b [fillcolor="#1f77b4"]', | |
' c [fillcolor="#2ca02c"]', | |
' d [fillcolor="#ff7f0e"]', | |
' a -> b', | |
' c -> d', | |
'}' | |
], | |
]; | |
</script> |