How to handle touch events?

[tracycollins]

I can't figure out how to get touch events (using the d3.js library) to work.

Is there a way to tell panzoom to not ignore touch events?

[anvaka]

Are you trying to enable panzoom for existing d3 visualization? Or do you want to disable touch events?

[tracycollins]

I want to use touch events with d3.

I have panzoom enabled for an svg g element "svgG" and then want to detect touch events on child elements (cirles and text) of the g element ("nodeCircles")

In the code snippet below, the .on("click", nodeClick) works, but the .on("touchStart", nodeClick) does not.

var svgG = svgMain.append("g").attr("id", "svgG");

var panzoomElement = document.getElementById("svgG");
panzoom(panzoomElement, { zoomSpeed: 0.030 });

var nodeSvgGroup = svgG.append("svg:g").attr("id", "nodeSvgGroup");

var nodeCircles = nodeSvgGroup.selectAll("circle").data(nodes, function(d){ return d.nodeId; });

nodeCircles.enter().append("circle").attr("nodeId", function(d) { return d.nodeId; })
 .on("click", nodeClick)
 .on("touchstart", nodeClick);

[anvaka]

I see. Might be relevant to #11 and comments in this thread. Unless @odai-alali or someone else beats me to it, I can give a callback approach a try later this week or next.

[anvaka]

Just pushed the changes. Should be available in version 4.2.0. Snippet from the readme:

panzoom(document.getElementById('g4'), {
  onTouch: function(e) {
    // `e` - is current touch event.

    return false; // tells the library to not preventDefault.
  }
});

Please let me know if this does not work.

[tracycollins]

Yes, it works! Thanks!

Unrelated, is there a way to programmatically control panzoom? For instance, something like:

panzoom.setZoomFactor(2.0);

[tracycollins]

I guess I don't completely understand handling events, because now that touch events work, zooming with a mouse (actually touchpad on macbook) now does not.

How can I get both touch events on iOS and zooming with a mouse to work?

[anvaka]

@tracycollins sorry - I missed this one.

To set zoom level from code, you'd need to call panzoom.zoomAbs(clientX, clientY, zoomFactor)

As for broken zoom with mouse - can you share a jsbin with me?

[tracycollins]

The mouse zoom seems to have fixed itself. Not sure if something I did fixed it.

Anyway...

I'm not sure how to use the code snippet to set zoom level. I tried and got the error:
"panzoom.zoomAbs is not a function"

This is how I'm using it:

var zoomFactor = 1.0; var panzoomElement = document.getElementById("svgTreemapLayoutArea"); panzoom(panzoomElement, { zoomSpeed: 0.030 }); panzoom.zoomAbs(0.5*width, 0.5*height, zoomFactor);