d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
69 lines (64 loc) • 1.75 kB
HTML
<meta charset="utf-8">
<body>
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/@hpcc-js/wasm/dist/graphviz.umd.js" type="javascript/worker"></script>
<script src="../build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition()
.ease(d3.easeLinear)
.delay(500)
.duration(2000);
})
.logEvents(true)
.on("initEnd", render);
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
graphviz
.renderDot(dot, function () {
dotIndex += 1;
if (dotIndex != dots.length) {
render();
}
});
}
var dots = [
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="ellipse"]',
' b [fillcolor="#1f77b4", shape="polygon"]',
' a -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="polygon"]',
' b [fillcolor="#1f77b4", shape="ellipse"]',
' a -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="triangle"]',
' b [fillcolor="#1f77b4", shape="invtriangle"]',
' a -> b',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728", shape="invtriangle"]',
' b [fillcolor="#1f77b4", shape="triangle"]',
' a -> b',
'}'
],
];
</script>