Skip to content

Commit 4c998ba

Browse files
mbostockmbostock
committed
Propagate touch identifier in d3.svg.touches.
Also, add a fun little example demonstrating multi-touch.
1 parent f1a2f62 commit 4c998ba

5 files changed

Lines changed: 99 additions & 30 deletions

File tree

‎d3.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3172,13 +3172,13 @@ function d3_svg_diagonalProjection(d) {
31723172
return [d.x, d.y];
31733173
}
31743174
d3.svg.mouse = function(container) {
3175-
return d3_svg_mousePoints(container, [d3.event])[0];
3175+
return d3_svg_mousePoint(container, d3.event);
31763176
};
31773177

31783178
// https://bugs.webkit.org/show_bug.cgi?id=44083
31793179
var d3_mouse_bug44083 = /WebKit/.test(navigator.userAgent) ? -1 : 0;
31803180

3181-
function d3_svg_mousePoints(container, events) {
3181+
function d3_svg_mousePoint(container, e) {
31823182
var point = (container.ownerSVGElement || container).createSVGPoint();
31833183
if ((d3_mouse_bug44083 < 0) && (window.scrollX || window.scrollY)) {
31843184
var svg = d3.select(document.body)
@@ -3190,21 +3190,23 @@ function d3_svg_mousePoints(container, events) {
31903190
d3_mouse_bug44083 = !(ctm.f || ctm.e);
31913191
svg.remove();
31923192
}
3193-
return events.map(function(e) {
3194-
if (d3_mouse_bug44083) {
3195-
point.x = e.pageX;
3196-
point.y = e.pageY;
3197-
} else {
3198-
point.x = e.clientX;
3199-
point.y = e.clientY;
3200-
}
3201-
point = point.matrixTransform(container.getScreenCTM().inverse());
3202-
return [point.x, point.y];
3203-
});
3193+
if (d3_mouse_bug44083) {
3194+
point.x = e.pageX;
3195+
point.y = e.pageY;
3196+
} else {
3197+
point.x = e.clientX;
3198+
point.y = e.clientY;
3199+
}
3200+
point = point.matrixTransform(container.getScreenCTM().inverse());
3201+
return [point.x, point.y];
32043202
};
32053203
d3.svg.touches = function(container) {
32063204
var touches = d3.event.touches;
3207-
return touches ? d3_svg_mousePoints(container, d3_array(touches)) : [];
3205+
return touches ? d3_array(touches).map(function(touch) {
3206+
var point = d3_svg_mousePoint(container, touch);
3207+
point.identifier = touch.identifier;
3208+
return point;
3209+
}) : [];
32083210
};
32093211
d3.svg.symbol = function() {
32103212
var type = d3_svg_symbolType,

‎d3.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/touch/touch.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
5+
<script type="text/javascript" src="../../d3.js"></script>
6+
<style type="text/css">
7+
8+
html, body {
9+
height: 100%;
10+
}
11+
12+
body {
13+
margin: 0;
14+
}
15+
16+
svg {
17+
display: block;
18+
overflow: hidden;
19+
width: 100%;
20+
height: 100%;
21+
}
22+
23+
</style>
24+
</head>
25+
<body>
26+
<script type="text/javascript">
27+
28+
var color = d3.scale.category10();
29+
30+
var svg = d3.select("body").append("svg:svg");
31+
32+
d3.select("body")
33+
.on("touchstart", touch)
34+
.on("touchmove", touch)
35+
.on("touchend", touch);
36+
37+
function touch() {
38+
d3.event.preventDefault();
39+
40+
var circle = svg.selectAll("circle.touch")
41+
.data(d3.svg.touches(svg.node()), function(d) { return d.identifier; })
42+
.attr("cx", function(d) { return d[0]; })
43+
.attr("cy", function(d) { return d[1]; });
44+
45+
circle.enter().append("svg:circle")
46+
.attr("class", "touch")
47+
.attr("cx", function(d) { return d[0]; })
48+
.attr("cy", function(d) { return d[1]; })
49+
.style("fill", function(d) { return color(d.identifier); })
50+
.attr("r", 1e-6)
51+
.transition()
52+
.duration(500)
53+
.ease("elastic")
54+
.attr("r", 48);
55+
56+
circle.exit()
57+
.attr("class", null)
58+
.transition()
59+
.attr("r", 1e-6)
60+
.remove();
61+
}
62+
63+
</script>
64+
</body>
65+
</html>

‎src/svg/mouse.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
d3.svg.mouse = function(container) {
2-
return d3_svg_mousePoints(container, [d3.event])[0];
2+
return d3_svg_mousePoint(container, d3.event);
33
};
44

55
// https://bugs.webkit.org/show_bug.cgi?id=44083
66
var d3_mouse_bug44083 = /WebKit/.test(navigator.userAgent) ? -1 : 0;
77

8-
function d3_svg_mousePoints(container, events) {
8+
function d3_svg_mousePoint(container, e) {
99
var point = (container.ownerSVGElement || container).createSVGPoint();
1010
if ((d3_mouse_bug44083 < 0) && (window.scrollX || window.scrollY)) {
1111
var svg = d3.select(document.body)
@@ -17,15 +17,13 @@ function d3_svg_mousePoints(container, events) {
1717
d3_mouse_bug44083 = !(ctm.f || ctm.e);
1818
svg.remove();
1919
}
20-
return events.map(function(e) {
21-
if (d3_mouse_bug44083) {
22-
point.x = e.pageX;
23-
point.y = e.pageY;
24-
} else {
25-
point.x = e.clientX;
26-
point.y = e.clientY;
27-
}
28-
point = point.matrixTransform(container.getScreenCTM().inverse());
29-
return [point.x, point.y];
30-
});
20+
if (d3_mouse_bug44083) {
21+
point.x = e.pageX;
22+
point.y = e.pageY;
23+
} else {
24+
point.x = e.clientX;
25+
point.y = e.clientY;
26+
}
27+
point = point.matrixTransform(container.getScreenCTM().inverse());
28+
return [point.x, point.y];
3129
};

‎src/svg/touches.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
d3.svg.touches = function(container) {
22
var touches = d3.event.touches;
3-
return touches ? d3_svg_mousePoints(container, d3_array(touches)) : [];
3+
return touches ? d3_array(touches).map(function(touch) {
4+
var point = d3_svg_mousePoint(container, touch);
5+
point.identifier = touch.identifier;
6+
return point;
7+
}) : [];
48
};

0 commit comments

Comments
 (0)