| /* |
| * 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> |
