d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
381 lines (373 loc) • 14.1 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>
function attributer(datum, index, nodes) {
var selection = d3.select(this);
if (datum.tag == "svg") {
var width = window.innerWidth;
var height = window.innerHeight;
var x = 200;
var y = 10
var scale = 0.75;
selection
.attr("width", width + "pt")
.attr("height", height + "pt")
.attr("viewBox", -x + " " + -y + " " + (width / scale) + " " + (height / scale));
datum.attributes.width = width + "pt";
datum.attributes.height = height + "pt";
datum.attributes.viewBox = -x + " " + -y + " " + (width / scale) + " " + (height / scale);
}
}
function transitionFactory() {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(40)
.duration(300 * dotIndex);
}
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.logEvents(true)
.transition(transitionFactory)
.tweenShapes(false)
.on("initEnd", render)
.attributer(attributer);
function render() {
var dotLines = dots[dotIndex % dots.length];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex += 1;
if (dotIndex != dots.length) {
render();
}
});
}
var colors = d3.schemeCategory10;
var dots = [
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
' a0 -> a3',
' a1 -> a3',
' a2 -> a3',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
' a0 -> a3',
' a1 -> a3',
' a2 -> a3',
' a0 -> a4',
' a1 -> a4',
' a2 -> a4',
' a3 -> a4',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
' a0 -> a3',
' a1 -> a3',
' a2 -> a3',
' a0 -> a4',
' a1 -> a4',
' a2 -> a4',
' a3 -> a4',
' a0 -> a5',
' a1 -> a5',
' a2 -> a5',
' a3 -> a5',
' a4 -> a5',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
' a0 -> a3',
' a1 -> a3',
' a2 -> a3',
' a0 -> a4',
' a1 -> a4',
' a2 -> a4',
' a3 -> a4',
' a0 -> a5',
' a1 -> a5',
' a2 -> a5',
' a3 -> a5',
' a4 -> a5',
' a0 -> a6',
' a1 -> a6',
' a2 -> a6',
' a3 -> a6',
' a4 -> a6',
' a5 -> a6',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
' a0 -> a3',
' a1 -> a3',
' a2 -> a3',
' a0 -> a4',
' a1 -> a4',
' a2 -> a4',
' a3 -> a4',
' a0 -> a5',
' a1 -> a5',
' a2 -> a5',
' a3 -> a5',
' a4 -> a5',
' a0 -> a6',
' a1 -> a6',
' a2 -> a6',
' a3 -> a6',
' a4 -> a6',
' a5 -> a6',
' a0 -> a7',
' a1 -> a7',
' a2 -> a7',
' a3 -> a7',
' a4 -> a7',
' a6 -> a7',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
' a0 -> a3',
' a1 -> a3',
' a2 -> a3',
' a0 -> a4',
' a1 -> a4',
' a2 -> a4',
' a3 -> a4',
' a0 -> a5',
' a1 -> a5',
' a2 -> a5',
' a3 -> a5',
' a4 -> a5',
' a0 -> a6',
' a1 -> a6',
' a2 -> a6',
' a3 -> a6',
' a4 -> a6',
' a5 -> a6',
' a0 -> a7',
' a1 -> a7',
' a2 -> a7',
' a3 -> a7',
' a4 -> a7',
' a6 -> a7',
' a0 -> a8',
' a1 -> a8',
' a2 -> a8',
' a3 -> a8',
' a4 -> a8',
' a6 -> a8',
' a7 -> a8',
'}'
],
[
'digraph {',
' graph [rankdir=TB]',
' node [style="filled"]',
' a0 [shape="circle" label="" fillcolor="' + colors[0] + '"]',
' a1 [shape="circle" label="" fillcolor="' + colors[1] + '"]',
' a2 [shape="circle" label="" fillcolor="' + colors[2] + '"]',
' a3 [shape="circle" label="" fillcolor="' + colors[3] + '"]',
' a4 [shape="circle" label="" fillcolor="' + colors[4] + '"]',
' a5 [shape="circle" label="" fillcolor="' + colors[5] + '"]',
' a6 [shape="circle" label="" fillcolor="' + colors[6] + '"]',
' a7 [shape="circle" label="" fillcolor="' + colors[7] + '"]',
' a8 [shape="circle" label="" fillcolor="' + colors[8] + '"]',
' a9 [shape="circle" label="" fillcolor="' + colors[9] + '"]',
' a0 -> a1',
' a0 -> a2',
' a1 -> a2',
' a0 -> a3',
' a1 -> a3',
' a2 -> a3',
' a0 -> a4',
' a1 -> a4',
' a2 -> a4',
' a3 -> a4',
' a0 -> a5',
' a1 -> a5',
' a2 -> a5',
' a3 -> a5',
' a4 -> a5',
' a0 -> a6',
' a1 -> a6',
' a2 -> a6',
' a3 -> a6',
' a4 -> a6',
' a5 -> a6',
' a0 -> a7',
' a1 -> a7',
' a2 -> a7',
' a3 -> a7',
' a4 -> a7',
' a6 -> a7',
' a0 -> a8',
' a1 -> a8',
' a2 -> a8',
' a3 -> a8',
' a4 -> a8',
' a6 -> a8',
' a7 -> a8',
' a0 -> a9',
' a1 -> a9',
' a2 -> a9',
' a3 -> a9',
' a4 -> a9',
' a6 -> a9',
' a7 -> a9',
' a8-> a9',
'}'
],
];
</script>