forked from Bismanpal-Singh/MemLens
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgraphviz.html
106 lines (98 loc) · 3.12 KB
/
graphviz.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!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>