d3-graphviz
Version:
Graphviz DOT rendering and animated transitions for D3
42 lines (35 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
var svgWidth = window.innerWidth - margin;
var svgHeight = window.innerHeight - margin;
var leftPad = 20;
var rightPad = 20;
var topPad = 20;
var bottomPad = 20;
graphviz = d3.select("#graph").graphviz()
.zoomScaleExtent([0.01, 100])
.attributer(attributer)
.renderDot('digraph {a -> b}');
function attributer(datum, index, nodes) {
var selection = d3.select(this);
if (datum.tag == "svg") {
graphWidth = +selection.datum().attributes.width.replace('pt', '');
graphHeight = +selection.datum().attributes.height.replace('pt', '');
graphviz.zoomTranslateExtent([[rightPad + graphWidth - svgWidth, bottomPad - svgHeight], [svgWidth - leftPad, svgHeight - topPad - graphHeight]])
selection
.attr("width", svgWidth)
.attr("height", svgHeight)
.attr("viewBox", "0 0 " + svgWidth + " " + svgHeight);
datum.attributes.width = svgWidth;
datum.attributes.height = svgHeight;
datum.attributes.viewBox = " 0 0 " + svgWidth + " " + svgHeight;
}
}
</script>