-
Notifications
You must be signed in to change notification settings - Fork 18
/
1.1.2-canvas-contours.html
85 lines (67 loc) · 2 KB
/
1.1.2-canvas-contours.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
<!DOCTYPE html>
<html lang="en">
<canvas width="960" height="500"></canvas>
<script src="lib/d3.v4.min.js"></script>
<script src="lib/d3-contour.v1.min.js"></script>
<script src="lib/dat.gui.min.js"></script>
<script src="js/contour2.js"></script>
<head>
<meta charset="UTF-8">
<title>contour</title>
</head>
<body>
<script>
var canvas = document.querySelector("canvas"),
width = 960,
height = 500,
context = canvas.getContext("2d");
var mode = {};
mode.mapType = 'heatmap';
mode.heatmap_line = false;
mode.contour_isfull = false;
mode.drawpoint = false;
mode.drawlable = false;
mode.referenceValue = 5;
mode.mapAlpha = 0.4;
mode.mapThresholds = 10;
var co = new Psdb.Contour(context,width,height);
// GUI
var gui = new dat.GUI();
// 下拉框形式选择文案
gui.add(mode, 'mapType', [ 'heatmap', 'contour' ]).onChange( function () {
co.refreshMap(mode);
});
gui.add( mode, 'heatmap_line' ).onChange( function () {
co.refreshMap(mode);
});
gui.add( mode, 'contour_isfull' ).onChange( function () {
co.refreshMap(mode);
});
gui.add( mode, 'drawpoint' ).onChange( function () {
co.refreshMap(mode);
});
gui.add( mode, 'drawlable' ).onChange( function () {
co.refreshMap(mode);
});
gui.add( mode, 'referenceValue' , 2, 9).onChange( function () {
co.refreshMap(mode);
});
gui.add( mode, 'mapAlpha', 0.1, 1.0 ).onChange(function () {
co.refreshMap(mode);
});
gui.add( mode, 'mapThresholds', 5, 20 ).onChange(function () {
co.refreshMap(mode);
});
//生成随机数据
var data =[];
for(var i = 0;i<30;i++){
data.push({
x :Math.round(Math.abs(d3.randomNormal(0,width)())),
y :Math.round(Math.abs(d3.randomNormal(0,height)())),
value :Math.random() * 10
});
};
co.initMap(mode,data);
</script>
</body>
</html>