d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
53 lines (46 loc) • 1.21 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 engineIndex = 0;
var engine;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(2000)
.duration(2000);
})
.on("initEnd", render);
function render() {
engine = engines[engineIndex];
dot = generateDot();
graphviz
.engine(engine)
.renderDot(dot)
.on("end", function () {
engineIndex = (engineIndex + 1) % engines.length;
render();
});
}
const engines = ["circo", "dot", "fdp", "neato", "osage", "patchwork", "twopi"];
function generateDot() {
return `
digraph {
graph [label=${engine} labelloc=t]
node [style=filled]
a [fillcolor="#d62728"]
b [fillcolor="#1f77b4"]
c [fillcolor="#2ca02c"]
d [fillcolor="#ff7f0e"]
a -> b
a -> c
a -> d
}
`;
}
</script>