d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
25 lines (20 loc) • 887 B
HTML
<meta charset="utf-8">
<body>
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="https://unpkg.com/viz.js@1.8.2/viz.js"></script>
<script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
// This example shows the behavior in version 2.x when a web is used
var graphviz = d3.select("#graph").graphviz({useWorker: true})
.renderDot('digraph {a -> b}')
.on('initEnd', () => {
// Never called since it's attached after init is complete
console.log('Number of nodes after init:', d3.selectAll(".node").size()); // N/A
})
.on('end', () => {
console.log('Number of nodes after render:', d3.selectAll(".node").size()); // 0
});
console.log('Number of nodes directly after creation:', d3.selectAll(".node").size()); // 2
</script>