Skip to content

Instantly share code, notes, and snippets.

@magjac

magjac/README.md

Last active November 19, 2017 15:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save magjac/17a4fb3879087190e6dbaa4c20ab8849 to your computer and use it in GitHub Desktop.
Save magjac/17a4fb3879087190e6dbaa4c20ab8849 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

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.

Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment