Skip to content

Instantly share code, notes, and snippets.

@shirhatti

shirhatti/index.html

Forked from magjac/index.html
Last active October 18, 2021 23:00
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 shirhatti/c65c9e16d3e305c61616139c3a34483c to your computer and use it in GitHub Desktop.
Save shirhatti/c65c9e16d3e305c61616139c3a34483c to your computer and use it in GitHub Desktop.
Download ZIP
d3-graphviz Demo
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/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("main")
.ease(d3.easeLinear)
.delay(500)
.duration(1500);
})
.logEvents(true)
.on("initEnd", render);
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
}
var dots = [
[
'digraph {',
' subgraph cluster {',
' style=filled;color=lightgrey;',
' node [style=filled,color=white,shape=box];',
' label = "nettrace file";',
' "Preamble";',
' }',
'}'
],
[
'digraph {',
' subgraph cluster {',
' style=filled;color=lightgrey;',
' node [style=filled,color=white,shape=box];',
' label = "nettrace file";',
' "Header";',
' "Preamble";',
' }',
'}'
],
];
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment