d3.event.translate contains NaN on zoom for touch devices

问题

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

来源：https://stackoverflow.com/questions/25930531/d3-event-translate-contains-nan-on-zoom-for-touch-devices