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/viz.js@1.8.0/viz.js" type="javascript/worker"></script> | |
| <script src="https://unpkg.com/d3-graphviz@1.0.1/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> |