mbostock/d3 — Issue #418: Support touch events in d3.svg.brush
Author: tmm1
Created: 2011-12-30 11:59:51+00:00
State: open

There's probably much better ways to implement this, so I'm not even going to bother with a pull request:

``` diff

diff --git a/public/src/d3.js b/public/src/d3.js
index 9f986ce..9b9254e 100644
--- a/public/src/d3.js
+++ b/public/src/d3.js
@@ -3942,12 +3942,17 @@ d3.svg.brush = function() {
: [];

g.each(function() {
- var g = d3.select(this).on("mousedown.brush", down),
+ var g = d3.select(this),
bg = g.selectAll(".background").data([,]),
fg = g.selectAll(".extent").data([,]),
tz = g.selectAll(".resize").data(resizes, String),
e;

+ if (typeof Touch == 'object')
+ g.on("touchstart.brush", down)
+ else
+ g.on("mousedown.brush", down)
+
// An invisible, mouseable area for starting a new brush.
bg.enter().append("svg:rect")
.attr("class", "background")
@@ -3994,7 +3999,7 @@ d3.svg.brush = function() {
d3_svg_brush = brush;
d3_svg_brushTarget = this;
d3_svg_brushExtent = extent;
- d3_svg_brushOffset = d3.svg.mouse(d3_svg_brushTarget);
+ d3_svg_brushOffset = (typeof Touch == 'object') ? d3.svg.touches(d3_svg_brushTarget, d3.event.changedTouches)[0] : d3.svg.mouse(d3_svg_brushTarget);

// If the extent was clicked on, drag rather than brush;
// store the offset between the mouse and extent origin instead.
@@ -4104,11 +4109,17 @@ d3.svg.brush = function() {
return brush;
};

- d3.select(window)
- .on("mousemove.brush", d3_svg_brushMove)
- .on("mouseup.brush", d3_svg_brushUp)
- .on("keydown.brush", d3_svg_brushKeydown)
- .on("keyup.brush", d3_svg_brushKeyup);
+ if (typeof Touch == 'object') {
+ d3.select(window)
+ .on("touchmove.brush", d3_svg_brushMove)
+ .on("touchend.brush", d3_svg_brushUp)
+ } else {
+ d3.select(window)
+ .on("mousemove.brush", d3_svg_brushMove)
+ .on("mouseup.brush", d3_svg_brushUp)
+ .on("keydown.brush", d3_svg_brushKeydown)
+ .on("keyup.brush", d3_svg_brushKeyup);
+ }

return brush;
};
@@ -4159,8 +4170,13 @@ function d3_svg_brushKeyup() {

function d3_svg_brushMove() {
if (d3_svg_brushOffset) {
- var mouse = d3.svg.mouse(d3_svg_brushTarget),
- g = d3.select(d3_svg_brushTarget);
+ if (typeof Touch == 'object') {
+ var mouse = d3.svg.touches(d3_svg_brushTarget, d3.event.changedTouches)[0],
+ g = d3.select(d3_svg_brushTarget)
+ } else {
+ var mouse = d3.svg.mouse(d3_svg_brushTarget),
+ g = d3.select(d3_svg_brushTarget);
+ }

if (!d3_svg_brushDrag) {

```

Confirmed working on an iPad