graphviz.html (117 lines of code) (raw):
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*
*/
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@2.20.0/dist/graphviz.umd.js"></script>
<script src="https://unpkg.com/d3-graphviz@5.6.0/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
function attributer(datum, index, nodes) {
var selection = d3.select(this);
if (datum.tag == "svg") {
var width = window.innerWidth;
var height = window.innerHeight;
var x = 200;
var y = 10
var scale = 0.75;
selection
.attr("width", width + "pt")
.attr("height", height + "pt")
.attr("viewBox", -x + " " + -y + " " + (width / scale) + " " + (height / scale));
datum.attributes.width = width + "pt";
datum.attributes.height = height + "pt";
datum.attributes.viewBox = -x + " " + -y + " " + (width / scale) + " " + (height / scale);
}
}
function transitionFactory() {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(40)
.duration(300 * dotIndex);
}
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.logEvents(true)
.transition(transitionFactory)
.tweenShapes(true)
.on("initEnd", render)
.attributer(attributer);
function render() {
var dotLines = dots[dotIndex % dots.length];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex += 1;
if (dotIndex != dots.length) {
render();
}
});
}
var colors = d3.schemeCategory10;
var dots = [
[
`digraph {
node [style=filled, fillcolor="#e5f5f9", fontname="Arial,sans-serif"];
A [label="A"];
}`,
],
[
`digraph {
node [style=filled, fillcolor="#e5f5f9", fontname="Arial,sans-serif"];
A [label="A"];
B [label="B"];
C [label="C"];
A -> B;
A -> C;
}`,
],
[
`digraph {
node [style=filled, fillcolor="#e5f5f9", fontname="Arial,sans-serif"];
A [label="A"];
B [label="B"];
C [label="C"];
D [label="D"];
A -> B;
A -> C;
B -> D;
}`,
],
[
`digraph {
node [style=filled, fillcolor="#e5f5f9", fontname="Arial,sans-serif"];
A [label="A"];
B [label="B"];
C [label="C"];
D [label="D"];
E [label="E"];
F [label="F"];
A -> B;
A -> C;
B -> D;
C -> E;
C -> F;
}`,
],
];
</script>