d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
51 lines (43 loc) • 1.41 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>
margin = 20; // to avoid scrollbars
graphviz = d3.select("#graph").graphviz()
.zoomScaleExtent([0.5, 2])
.attributer(attributer)
.renderDot('digraph {a -> b}');
function attributer(datum, index, nodes) {
var selection = d3.select(this);
if (datum.tag == "svg") {
var width = window.innerWidth;
var height = window.innerHeight;
selection
.attr("width", width)
.attr("height", height)
datum.attributes.width = width - margin;
datum.attributes.height = height - margin;
}
}
function resetZoom() {
console.log('Resetting zoom');
graphviz
.resetZoom(d3.transition().duration(1000));
}
function resizeSVG() {
console.log('Resize');
var width = window.innerWidth;
var height = window.innerHeight;
d3.select("#graph").selectWithoutDataPropagation("svg")
.transition()
.duration(700)
.attr("width", width - margin)
.attr("height", height - margin);
};
d3.select(window).on("resize", resizeSVG);
d3.select(window).on("click", resetZoom);
</script>