-
Notifications
You must be signed in to change notification settings - Fork 81
/
Copy pathtest_multi_points.html
113 lines (90 loc) · 3.61 KB
/
test_multi_points.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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dragit example with multiple circles</title>
<link href="../src/dragit.css" rel="stylesheet"/>
<script src="../lib/d3.v3.js"></script>
<script src="../src/dragit.js"></script>
</head>
<body>
<div id="viz"></div>
<p style="clear:both"></p>
<div id="slider"></div>
<label><input type="checkbox" name="mode" value="trajectory" onclick="dragit.trajectory.toggleAll('selected');"> Show all trajectories</label>
<label><input type="radio" name="drag-scope" value="low" onchange="dragit.mouse.scope = 'focus'" checked>drag focus</label>
<label><input type="radio" name="drag-scope" value="low" onchange="dragit.mouse.scope = 'selected'">drag all</label><br>
<label><input type="radio" name="drag-direction" value="low" onchange="dragit.mouse.dragging = 'jump'" checked>jump drag</label>
<label><input type="radio" name="drag-direction" value="low" onchange="dragit.mouse.dragging = 'horizontal'">horizontal drag</label>
<label><input type="radio" name="drag-direction" value="low" onchange="dragit.mouse.dragging = 'free'">free drag</label>
<br>
current state: <span id="current-state"></span><br>
current focus: <span id="current-focus"></span><br>
closest line: <span id="closest-line"></span><br>
closest point: <span id="closest-point"></span><br>
closest time: <span id="closest-time"></span><br>
<script>
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 900 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var time_steps = 20, nb_points = 5, current_time = Math.floor(Math.random()*time_steps);
var timecube = d3.range(nb_points).map(function(d, i) {
return d3.range(time_steps).map(function(e, j) {
return {x: j, y: Math.random(), t: j};
});
})
var xScale = d3.scale.linear().domain([0, time_steps]).range([margin.left, width]);
var yScale = d3.scale.linear()
.domain([0, d3.max(timecube, function(d) {
return d3.max(d, function(e) {
return e.y;
});
})
])
.range([margin.top, height]);
var svg = d3.select("#viz").append("svg")
.attr({width: width, height:height})
var points = svg.selectAll(".points")
.data(timecube)
.enter()
.append("circle")
.attr("class", "points");
// All other focus points
points.attr({cx: function(d) { return xScale(d[current_time].x)},
cy: function(d) { return yScale(d[current_time].y)},
r:10,
fill:"red"
})
.on("mouseenter", dragit.trajectory.display)
.on("mouseleave", dragit.trajectory.remove)
.call(dragit.object.activate)
// Time update callback function
function update(v, t) {
dragit.time.current = v || dragit.time.current;
points.transition().duration(100)
.attr({cx: function(d) { return xScale(d[dragit.time.current].x)},
cy: function(d) { return yScale(d[dragit.time.current].y)}
})
}
function init() {
dragit.init("svg");
dragit.data = timecube.map(function(d, i) {
return d.map(function(e, j) {
return [xScale(e.x), yScale(e.y), i];
})
});
dragit.time = {min:0, max:time_steps, step:1, current: current_time}
dragit.evt.register("update", update);
dragit.evt.register("new_state", function() {
d3.select("#current-state").text(dragit.statemachine.current_state);
});
dragit.evt.register("update", function() {
d3.select("#closest-time").text(dragit.time.current);
d3.select("#current-focus").text(dragit.statemachine.current_id);
});
dragit.utils.slider("#slider", true)
}
init();
</script>
</body>
</html>