I wrote a custom zoom function for my svg using d3 like so:
//Zoom behavior
function myzoom() {
xpos = d3.event.translate[0];
ypos = d3.event.translate[1];
vis.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}
This works fine on non-touch devices, but when I zoom in on touch devices the d3.event.translate array sometimes starts containing NaN's. When this occurs all subsequent calls to myZoom also have this issue and zooming stops working.
This is the error I receive is:
Error: Invalid value for <g> attribute transform="translate(NaN,NaN) scale(0.8467453123625244)" d3.v2.js?body=1:387
attrConstant d3.v2.js?body=1:387(anonymous function) d3.v2.js?body=1:3860
d3_selection_each d3.v2.js?body=1:509
d3_selectionPrototype.each d3.v2.js?body=1:3859
d3_selectionPrototype.attr d3.v2.js?body=1:3638
myzoom fw_tree.js?body=1:2842
event d3.v2.js?body=1:64
(anonymous function) d3.v2.js?body=1:175
dispatch d3.v2.js?body=1:4826
mousewheel d3.v2.js?body=1:4855
wrapper d3.v2.js?body=1:492
Any help or pointers would be greatly appreciated