-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathone.html
33 lines (29 loc) · 11.6 KB
/
one.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
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/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 = ["strict digraph \"\" {\n\tgraph [name=\"Round 0\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n}\n", "strict digraph \"\" {\n\tgraph [name=\"Round 1\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t\tcan_1\t[color=\"#80CC80\",\n\t\t\tlabel=\"3.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_second {\n\t\tgraph [label=second];\n\t\treq_2\t[color=\"#80C080\",\n\t\t\tlabel=\"==3.0.0\",\n\t\t\tshape=cds];\n\t}\n\tsubgraph cluster_third {\n\t\tgraph [label=third];\n\t\treq_3\t[color=\"#80C080\",\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n\treq_0 -> can_1\t[color=\"#80CC80\"];\n\tcan_1 -> req_2\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n\tcan_1 -> req_3\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n}\n", "strict digraph \"\" {\n\tgraph [name=\"Round 2\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t\tcan_1\t[color=red,\n\t\t\tlabel=\"3.0.0\",\n\t\t\tshape=signature];\n\t}\n\tsubgraph cluster_second {\n\t\tgraph [label=second];\n\t\treq_2\t[color=black,\n\t\t\tlabel=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\tcan_4\t[label=\"3.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_third {\n\t\tgraph [label=third];\n\t\treq_3\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\treq_5\t[label=\"==3.0.0\",\n\t\t\tshape=cds];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n\treq_0 -> can_1\t[color=\"#80CC80\"];\n\tcan_1 -> req_2\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_1 -> req_3\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_2 -> can_4\t[color=\"#80CC80\"];\n\tcan_4 -> req_5;\n}\n", "strict digraph \"\" {\n\tgraph [name=\"Round 3\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t\tcan_1\t[color=red,\n\t\t\tlabel=\"3.0.0\",\n\t\t\tshape=signature];\n\t\tcan_6\t[color=\"#80CC80\",\n\t\t\tlabel=\"2.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_second {\n\t\tgraph [label=second];\n\t\treq_2\t[color=black,\n\t\t\tlabel=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\tcan_4\t[label=\"3.0.0\",\n\t\t\tshape=box];\n\t\treq_7\t[color=\"#80C080\",\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t}\n\tsubgraph cluster_third {\n\t\tgraph [label=third];\n\t\treq_3\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\treq_5\t[label=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\treq_8\t[color=\"#80C080\",\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n\treq_0 -> can_1\t[color=\"#80CC80\"];\n\treq_0 -> can_6\t[color=\"#80CC80\"];\n\tcan_1 -> req_2\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_1 -> req_3\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_2 -> can_4\t[color=\"#80CC80\"];\n\tcan_4 -> req_5;\n\tcan_6 -> req_7\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n\tcan_6 -> req_8\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n}\n", "strict digraph \"\" {\n\tgraph [name=\"Round 4\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t\tcan_1\t[color=red,\n\t\t\tlabel=\"3.0.0\",\n\t\t\tshape=signature];\n\t\tcan_6\t[color=red,\n\t\t\tlabel=\"2.0.0\",\n\t\t\tshape=signature];\n\t}\n\tsubgraph cluster_second {\n\t\tgraph [label=second];\n\t\treq_2\t[color=black,\n\t\t\tlabel=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\tcan_4\t[label=\"3.0.0\",\n\t\t\tshape=box];\n\t\treq_7\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\tcan_9\t[label=\"2.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_third {\n\t\tgraph [label=third];\n\t\treq_3\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\treq_5\t[label=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\treq_8\t[color=black,\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n\treq_0 -> can_1\t[color=\"#80CC80\"];\n\treq_0 -> can_6\t[color=\"#80CC80\"];\n\tcan_1 -> req_2\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_1 -> req_3\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_2 -> can_4\t[color=\"#80CC80\"];\n\tcan_4 -> req_5;\n\tcan_6 -> req_7\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_6 -> req_8\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_7 -> can_9\t[color=\"#80CC80\"];\n\tcan_9 -> req_3;\n}\n", "strict digraph \"\" {\n\tgraph [name=\"Round 5\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t\tcan_1\t[color=red,\n\t\t\tlabel=\"3.0.0\",\n\t\t\tshape=signature];\n\t\tcan_6\t[color=red,\n\t\t\tlabel=\"2.0.0\",\n\t\t\tshape=signature];\n\t\tcan_10\t[color=\"#80CC80\",\n\t\t\tlabel=\"1.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_second {\n\t\tgraph [label=second];\n\t\treq_2\t[color=black,\n\t\t\tlabel=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\tcan_4\t[label=\"3.0.0\",\n\t\t\tshape=box];\n\t\treq_7\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\tcan_9\t[label=\"2.0.0\",\n\t\t\tshape=box];\n\t\treq_11\t[color=\"#80C080\",\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t}\n\tsubgraph cluster_third {\n\t\tgraph [label=third];\n\t\treq_3\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\treq_5\t[label=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\treq_8\t[color=black,\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n\treq_0 -> can_1\t[color=\"#80CC80\"];\n\treq_0 -> can_6\t[color=\"#80CC80\"];\n\treq_0 -> can_10\t[color=\"#80CC80\"];\n\tcan_1 -> req_2\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_1 -> req_3\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_2 -> can_4\t[color=\"#80CC80\"];\n\tcan_4 -> req_5;\n\tcan_6 -> req_7\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_6 -> req_8\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_7 -> can_9\t[color=\"#80CC80\"];\n\tcan_9 -> req_3;\n\tcan_10 -> req_11\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n}\n", "strict digraph \"\" {\n\tgraph [name=\"Round 6\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t\tcan_1\t[color=red,\n\t\t\tlabel=\"3.0.0\",\n\t\t\tshape=signature];\n\t\tcan_6\t[color=red,\n\t\t\tlabel=\"2.0.0\",\n\t\t\tshape=signature];\n\t\tcan_10\t[color=\"#80CC80\",\n\t\t\tlabel=\"1.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_second {\n\t\tgraph [label=second];\n\t\treq_2\t[color=black,\n\t\t\tlabel=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\tcan_4\t[label=\"3.0.0\",\n\t\t\tshape=box];\n\t\treq_7\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\tcan_9\t[label=\"2.0.0\",\n\t\t\tshape=box];\n\t\treq_11\t[color=\"#80C080\",\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t\tcan_12\t[color=\"#80CC80\",\n\t\t\tlabel=\"1.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_third {\n\t\tgraph [label=third];\n\t\treq_3\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\treq_5\t[label=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\treq_8\t[color=\"#80C080\",\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n\treq_0 -> can_1\t[color=\"#80CC80\"];\n\treq_0 -> can_6\t[color=\"#80CC80\"];\n\treq_0 -> can_10\t[color=\"#80CC80\"];\n\tcan_1 -> req_2\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_1 -> req_3\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_2 -> can_4\t[color=\"#80CC80\"];\n\tcan_4 -> req_5;\n\tcan_6 -> req_7\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_6 -> req_8\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_7 -> can_9\t[color=\"#80CC80\"];\n\tcan_9 -> req_3;\n\tcan_10 -> req_11\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n\treq_11 -> can_12\t[color=\"#80CC80\"];\n\tcan_12 -> req_8\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n}\n", "strict digraph \"\" {\n\tgraph [name=\"Round 7\",\n\t\trankdir=LR\n\t];\n\tnode [label=\"\\N\"];\n\tedge [arrowhead=empty,\n\t\tcolor=\"#808080\",\n\t\tstyle=dashed\n\t];\n\tsubgraph cluster_first {\n\t\tgraph [label=first];\n\t\treq_0\t[label=\"*\",\n\t\t\tshape=cds];\n\t\tcan_1\t[color=red,\n\t\t\tlabel=\"3.0.0\",\n\t\t\tshape=signature];\n\t\tcan_6\t[color=red,\n\t\t\tlabel=\"2.0.0\",\n\t\t\tshape=signature];\n\t\tcan_10\t[color=\"#80CC80\",\n\t\t\tlabel=\"1.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_second {\n\t\tgraph [label=second];\n\t\treq_2\t[color=black,\n\t\t\tlabel=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\tcan_4\t[label=\"3.0.0\",\n\t\t\tshape=box];\n\t\treq_7\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\tcan_9\t[label=\"2.0.0\",\n\t\t\tshape=box];\n\t\treq_11\t[color=\"#80C080\",\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t\tcan_12\t[color=\"#80CC80\",\n\t\t\tlabel=\"1.0.0\",\n\t\t\tshape=box];\n\t}\n\tsubgraph cluster_third {\n\t\tgraph [label=third];\n\t\treq_3\t[color=black,\n\t\t\tlabel=\"==2.0.0\",\n\t\t\tshape=cds];\n\t\treq_5\t[label=\"==3.0.0\",\n\t\t\tshape=cds];\n\t\treq_8\t[color=\"#80C080\",\n\t\t\tlabel=\"==1.0.0\",\n\t\t\tshape=cds];\n\t\tcan_13\t[color=\"#80CC80\",\n\t\t\tlabel=\"1.0.0\",\n\t\t\tshape=box];\n\t}\n\troot\t[label=\":root:\",\n\t\tshape=Mdiamond];\n\troot -> req_0;\n\treq_0 -> can_1\t[color=\"#80CC80\"];\n\treq_0 -> can_6\t[color=\"#80CC80\"];\n\treq_0 -> can_10\t[color=\"#80CC80\"];\n\tcan_1 -> req_2\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_1 -> req_3\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_2 -> can_4\t[color=\"#80CC80\"];\n\treq_3 -> can_13\t[color=\"#80CC80\"];\n\tcan_4 -> req_5;\n\treq_5 -> can_13\t[color=\"#80CC80\"];\n\tcan_6 -> req_7\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\tcan_6 -> req_8\t[arrowhead=vee,\n\t\tcolor=\"#FF9999\"];\n\treq_7 -> can_9\t[color=\"#80CC80\"];\n\treq_8 -> can_13\t[color=\"#80CC80\"];\n\tcan_9 -> req_3;\n\tcan_10 -> req_11\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n\treq_11 -> can_12\t[color=\"#80CC80\"];\n\tcan_12 -> req_8\t[arrowhead=vee,\n\t\tcolor=\"#80CC80\",\n\t\tstyle=solid];\n}\n"];
</script>