-
Notifications
You must be signed in to change notification settings - Fork 103
/
demo.html
111 lines (107 loc) · 2.43 KB
/
demo.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
107
108
109
110
111
<!DOCTYPE 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>
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(500)
.duration(1500);
})
.logEvents(true)
.on("initEnd", render);
function render() {
var dot = dots[dotIndex];
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
}
var dots = [
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
b [fillcolor="#1f77b4"]
a -> b
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
c [fillcolor="#2ca02c"]
b [fillcolor="#1f77b4"]
a -> b
a -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
b [fillcolor="#1f77b4"]
c [fillcolor="#2ca02c"]
a -> b
a -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728" shape="box"]
b [fillcolor="#1f77b4" shape="parallelogram"]
c [fillcolor="#2ca02c" shape="pentagon"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="yellow" shape="star"]
b [fillcolor="yellow" shape="star"]
c [fillcolor="yellow" shape="star"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728" shape="triangle"]
b [fillcolor="#1f77b4" shape="diamond"]
c [fillcolor="#2ca02c" shape="trapezium"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728" shape="box"]
b [fillcolor="#1f77b4" shape="parallelogram"]
c [fillcolor="#2ca02c" shape="pentagon"]
a -> b
a -> c
b -> c
}`,
`digraph {
node [style="filled"]
a [fillcolor="#d62728"]
b [fillcolor="#1f77b4"]
c [fillcolor="#2ca02c"]
a -> b
a -> c
c -> b
}`,
`digraph {
node [style="filled"]
b [fillcolor="#1f77b4"]
c [fillcolor="#2ca02c"]
c -> b
}`,
`digraph {
node [style="filled"]
b [fillcolor="#1f77b4"]
}`,
];
</script>