d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
183 lines (172 loc) • 4.8 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="main" style="text-align: center;"></div>
<script>
var dotIndex = 0;
var transition1;
var numGraphs = 0;
var numPending = 0;
function attributer(datum, index, nodes) {
var selection = d3.select(this);
if (datum.tag == "svg") {
var width = "290";
var height = "230";
var x = "10";
var y = "10";
var k = 1.2;
selection
.attr("width", width + "pt")
.attr("height", height + "pt")
.attr("viewBox", -x + " " + -y + " " + width * k + " " + height * k);
datum.attributes.width = width + "pt";
datum.attributes.height = height + "pt";
datum.attributes.viewBox = -x + " " + -y + " " + width * k+ " " + height * k;
}
}
function transitionFactory() {
if (numPending == numGraphs) {
transition1 = d3.transition("main")
.ease(d3.easeLinear)
.delay(1500)
.duration(1500);
}
numPending -= 1;
return transition1;
}
function render(graphviz) {
var dotLines = dots[dotIndex % dots.length];
var dot = dotLines.join('');
graphviz
.tweenShapes(false)
.dot(dot)
.attributer(attributer)
.render()
.on('end', function () {
if (numPending == 0) {
dotIndex += 1;
}
if (dotIndex != 100) {
render(graphviz);
}
});
numPending += 1;
}
var table = d3.select("#main").append("table");
var graphs = [];
var nrows = 2;
var ncols = 4;
for (var r = 0; r < nrows; r++) {
var row = table.append("tr");
graphs.push([]);
for (var c = 0; c < ncols; c++) {
var id = "r" + r + "c" + c;
var col = row.append("td")
.attr("id", id);
var p = col.append("p")
.text(id);
var div = col.append("div");
var graphviz = div.graphviz()
.transition(transitionFactory)
.on("initEnd", function () {
numPending -= 1;
if (numPending == 0) {
for (var r = 0; r < nrows; r++) {
for (var c = 0; c < ncols; c++) {
var graph = graphs[r][c];
render(graph.graphviz);
}
}
}
});
graphs[r].push({
"p": p,
"graphviz": graphviz,
});
numPending += 1;
numGraphs += 1;
}
}
var dots = [
[
'digraph {',
' node [style="filled"]',
' b [fillcolor="#1f77b4"]',
' a [fillcolor="#d62728"]',
' c [fillcolor="#2ca02c"]',
' d [fillcolor="#ff7f0e"]',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' d [fillcolor="#ff7f0e"]',
' a -> b',
' a -> c',
' a -> d',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' d [fillcolor="#ff7f0e"]',
' a -> b',
' a -> c',
' b -> d',
' c -> d',
' a -> d',
'}'
],
[
'digraph {',
' node [style="filled"]',
' a [fillcolor="#d62728"]',
' b [fillcolor="#1f77b4"]',
' c [fillcolor="#2ca02c"]',
' d [fillcolor="#ff7f0e"]',
' a -> b',
' a -> c',
' b -> d',
' c -> d',
' a -> d',
' c -> b',
'}'
],
];
for (var r = 0; r < nrows; r++) {
for (var c = 0; c < ncols; c++) {
var graph = graphs[r][c];
var p = graph.p;
var graphviz = graph.graphviz;
var html = [];
if (c < 2 ) {
graphviz.fade(false);
html.push("<s>fade</s>");
} else {
html.push("fade");
}
if (r == 0) {
graphviz.tweenPaths(false);
html.push("<s>tweenPaths</s>");
} else {
html.push("tweenPaths");
}
if (c == 0 | c == 2) {
graphviz.growEnteringEdges(false);
html.push("<s>growEnteringEdges</s>");
} else {
html.push("growEnteringEdges");
}
p.html(html.join(' '));
}
}
</script>