forked from JCowdy/K-Means-PHP
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
135 lines (115 loc) · 5.11 KB
/
index.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数据挖掘课程 实验演示 2010051933 黎欣健</title>
<style>
#canvasContainer {
text-align: center;
}
#mainCanvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="canvasContainer">
<canvas id="mainCanvas" width="600" height="450" ></canvas>
<hr>
<div>
k = <input id="kv" type="number" maxlength="2" style="width: 50px">
<button id="calc_k">计算</button>
<button id="btn_reset" onclick="location.reload() ">重置</button>
</div><!--
<div>
eps = <input id="epsv" type="number" maxlength="2" style="width: 50px">
MinPts = <input id="minptsv" type="number" maxlength="2" style="width: 50px">
<button id="calc_d">计算</button>
</div>-->
<div style="text-align:left;width:600px;margin:auto">
演示步骤:<br>
1. 在上方画板区域任意位置点击鼠标,将会在鼠标周边生成一系列随机的点。<br>
2. 点击计算按钮,则进行k均值聚类计算,聚类完成之后会自动按照分类对画板上面的点着色,同类同色。<br><br>
</div>
<div style="color:#668;font-size:14px;margin-top:3em">2010051933 黎欣健</div>
</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/kmeans.js"></script>
<script type="text/javascript" src="js/dbscan.js"></script>
<script>
$(function(){
var exp = {};
exp.c$ = $('#mainCanvas');
exp.c = exp.c$.get(0);
exp.ctx = exp.c.getContext('2d');
exp.colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#00FFFF', '#FF00FF', '#800080', '#00FF00', '#b2d235', '#121a2a'];
exp.point_r = 3;
exp.k_def = 0;
exp.points = [];
exp.initCentroids = [];
exp.canvas_click = function(e){
if (exp.k_def + 1 > exp.colors.length) {
alert('点太多');
return;
}
exp.k_def++;
$('#kv').val(exp.k_def);
exp.initCentroids.push([e.offsetX, e.offsetY]);
var new_points = [];
for (var i=0;i<100;i++) {
var r = getRandomInt(0, 180);
var a = getRandomInt(0, 359) * Math.PI / 180; //
var x = Math.floor(e.offsetX + r * Math.cos(a));
var y = Math.floor(e.offsetY + r * Math.sin(a));
new_points.push([x,y]);
exp.points.push([x,y]);
}
for (var i=0;i<new_points.length;i++) {
exp.draw_point(new_points[i][0], new_points[i][1], '#000000');
}
};
exp.kmeans_calc = function(){
exp.k_def = parseInt($('#kv').val());
if (exp.k_def < 2 ) {
alert('请多点一些点');
return;
}
var g = kmeans(exp.points, exp.initCentroids, exp.k_def);
//var g = kmeans(exp.points, [], exp.k_def);
for (var i=0;i< g.length;i++) {
for (var j=0; j<g[i].length;j++) {
exp.draw_point(g[i][j][0], g[i][j][1], exp.colors[i]);
}
}
};
exp.dbscan_calc = function(){
if (exp.points < 200 ) {
alert('请多点一些点');
return;
}
DBSCAN(exp.points, parseInt($('#epsv').val()), parseInt($('#minptsv').val()));
// for (var i=0;i< g.length;i++) {
// for (var j=0; j<g[i].length;j++) {
// exp.draw_point(g[i][j][0], g[i][j][1], exp.colors[i]);
// }
// }
};
exp.draw_point = function (x, y, color) {
exp.ctx.beginPath();
exp.ctx.arc(x, y, exp.point_r, 0, 2*Math.PI, true);
exp.ctx.fillStyle = color;
exp.ctx.fill();
};
exp.c$.on('click', exp.canvas_click);
$('#calc_k').on('click', function(){
exp.kmeans_calc();
$('#calc_k').attr('disabled','disabled');
});
$('#calc_d').on('click', exp.dbscan_calc);
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
});
</script>
</body>
</html>