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
|
var margin = {
top: 20,
right: 10,
bottom: 20,
left: 10
};
var width = screen.width - margin.left - margin.right;
var height = screen.height - margin.top - margin.bottom;
var circleRadius = 20;
var delay = 100; // in ms
var circleOffset = circleRadius;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var delays = [1, 5, 10, 20, 50, 100, 500, 1000, 2000];
var circle2 = svg.append('circle')
.attr('cx', (width / 2) - circleOffset)
.attr('cy', (height / 2) - circleOffset)
.attr('r', circleRadius)
.attr('fill', 'red')
var circle1 = svg.append('circle')
.attr('cx', (width / 2) - circleOffset)
.attr('cy', (height / 2) - circleOffset)
.attr('r', circleRadius)
.attr('fill', 'gray')
var ds = svg.selectAll('.delay')
.data(delays)
.enter()
.append('g')
.attr('class', 'delay')
.attr('left', 100)
.attr('top', 50)
.attr('transform', function (d, i) {
return 'translate(' + i * 100 + ', 0)';
})
function updateButtons() {
svg.selectAll('.delay')
.select('text')
.attr('fill', function (d) {
return d === delay ? 'black' : 'lightblue'
})
}
ds.append('text')
.text(function (d) {
return d + ' ms';
})
.on('click', function (d) {
delay = d;
updateButtons();
});
svg.append('rect')
.attr('height', height)
.attr('width', width)
.attr('opacity', 0)
.on('mousemove', function () {
var start = performance.now();
var x = d3.event.x;
var y = d3.event.y;
circle1.attr('cx', x - circleOffset / 2)
circle1.attr('cy', y - circleOffset)
var step = function (timestamp) {
if (timestamp - start < delay) {
window.requestAnimationFrame(step);
} else {
circle2.attr('cx', x - circleOffset / 2);
circle2.attr('cy', y - circleOffset);
}
}
window.requestAnimationFrame(step);
})
updateButtons();
|