D3.behavior.zoom disable double tap behavior

Question

I just deal with D3 and the graphic ability to create shapes, etc. for a mobile application, and I have a zoom that works fine on the desktop, and I managed to remove the double-click to zoom, following this answer: How to disable double-zoom for d3.behavior.zoom?

Is there a way to disable it for mobile devices (double tap)? Enlarging a double tap also stops the double-touch event on the figures from starting, so if I cannot turn off double-scaling, is there a way to make sure that all events fire when I double-tap, not just scaling (double-clicking on the desktop behaves like expected)?

Thanks a lot Becky

Answer 1

Assuming that on mobile devices zooming should be done with a hard gesture, you can try to determine the number of fingers in the zoom handler, for example:

if (d3.event.sourceEvent.touches.length == 1) 
    return

Answer 2

D3 controls the event touchstart.zoomon the item you selected to enlarge with d3.behavior.zoom()(). You cannot just replace this handler and conditionally call the original D3 handler, because part of its algorithm adds and removes this handler, so your override will be overwritten.

. , (-), . :

<g class="zoom_area">  <-- Element you called D3 zoom behaviour on
  <rect width=... height=... style="visibility:hidden; pointer-events:all" class="background">
    // Background rect that will catch all touch events missed by your elements
  </rect>
  <g class="content"> <-- Container for your elements
    ...  <-- Your SVG content
  </g>
</g>

D3:

var zoomer = d3.behavior.zoom();
zoomer(d3.select('g.zoom_area'));

:

var last_touch_time = undefined;
var touchstart = function() {
    var touch_time = d3.event.timeStamp;
    if (touch_time-last_touch_time < 500 && d3.event.touches.length===1) {
        d3.event.stopPropagation();
        last_touch_time = undefined;
        return;
    }
    last_touch_time = touch_time;
};
d3.select('.background_rect').on('touchstart.zoom', touchstart);
d3.select('.content').on('touchstart.zoom', touchstart);

, , . , - . , / - .

var last_touch_event = undefined;
var touchstart = function() {
    if (last_touch_event && d3.event.touches.length===1 &&
        d3.event.timeStamp - last_touch_event.timeStamp < 500 &&
        Math.abs(d3.event.touches[0].screenX-last_touch_event.touches[0].screenX) < 10 &&
        Math.abs(d3.event.touches[0].screenY-last_touch_event.touches[0].screenY) < 10) {
        d3.event.stopPropagation();
        last_touch_time = undefined;
    }
    last_touch_event = d3.event;
};
d3.select('.background_rect').on('touchstart.zoom', touchstart);
d3.select('.content').on('touchstart.zoom', touchstart);

dblclick, .