-
Notifications
You must be signed in to change notification settings - Fork 4
/
graph.html
116 lines (113 loc) · 3.92 KB
/
graph.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
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" crossorigin="anonymous"/>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.2.0/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/d3-4.13.0.min.js"></script>
<style>
.github-fork-ribbon:before {
background-color: #333;
}
</style>
<title>random-data - graph demo</title>
</head>
<body style="text-align: center; padding: 24px 0">
<p><a href="https://www.luogu.org/problemnew/show/P1345" target="__blank">默认的模板是对应这个题目</a></p>
<textarea style="min-height: 300px; min-width: 400px;" id="input"></textarea>
<br /><button class="pure-button pure-button-primary" id="click" style="margin: 8px 0">随机一个</button><br />
<textarea style="min-height: 300px; min-width: 400px;" disabled id="output"></textarea>
<hr />
<div id="mountNode"></div>
<a class="github-fork-ribbon" href="https://github.com/muzea-demo/random-data" data-ribbon="F**k me on GitHub" title="F**k me on GitHub">F**k me on GitHub</a>
</body>
<script type="module">
import { parse } from './parse.mjs'
import { generate } from './generate.mjs'
import { stringify } from './stringify.mjs'
let initValue = '';
initValue += 'constraint N int 10 15\n';
initValue += 'constraint M int N 2*N\n';
initValue += 'constraint c int 1 N | shuffle\n';
initValue += 'constraint c1 alias c\n';
initValue += 'constraint c2 alias c\n';
initValue += 'constraint g graph 1 N M | unlink(c1,c2)\n';
initValue += 'repeat 1 ${N} ${M} ${c1} ${c2}\n';
initValue += 'repeat 1 ${g}\n';
document.querySelector('#input').value = initValue;
function handleClick() {
const ret = parse(document.querySelector('#input').value);
try {
const list = generate(...ret);
handleDraw(list);
document.querySelector('#output').value = stringify(list);
} catch (error) {
console.error(error);
window.alert(error);
}
}
const graph = new G6.Graph({
container: 'mountNode',
width: 500,
height: 500
});
function getPoint(x, y, l, nodeNum, index) {
if (index === 1) {
return [l + x, y];
}
const per = (2 * Math.PI) / nodeNum;
const deg = per * (index - 1);
return [Math.floor(l * Math.cos(deg) + x), Math.floor(l * Math.sin(deg) + y)];
}
function handleDraw (list) {
const needDraw = [];
list.forEach(({ values }) => {
values.forEach((value) => {
if (value.type === 'graph') {
needDraw.push(value);
}
});
});
const end = needDraw.length;
if (end === 0) {
graph.changeSize(500, 500);
graph.read({
nodes: [],
edges: [],
});
return;
}
const data = {};
data.nodes = [];
data.edges = [];
let i = 0;
while (i !== end) {
const item = needDraw[i];
const totalNode = item.nodeList.length;
item.nodeList.forEach((nodeNum) => {
const [x, y] = getPoint(250, 250 + 500 * i, 200, totalNode, nodeNum);
data.nodes.push({
id: `G${i}_${nodeNum}`,
label: `G${i}_${nodeNum}`,
x,
y,
});
});
item.value.forEach((edge, ei) => {
data.edges.push({
id: `G${i}_e_${ei}`,
target: `G${i}_${edge[0]}`,
source: `G${i}_${edge[1]}`
});
});
i += 1;
}
graph.changeSize(500, 500*end);
graph.read(data);
}
document.querySelector('#click').addEventListener('click', handleClick);
</script>
</html>