map = { let clickTimeout = null; function startClick(e, feature) { if (clickTimeout) { clearTimeout(clickTimeout); } const coords = point(e.target, e); /* const transform = d3.zoomTransform(map.children[0]); const coordsTranslated = transform.invert(coords); console.log(coords, coordsTranslated); */ clickTimeout = setTimeout( handleClick.bind(this, e, feature, coords), width <= 500 ? 300 : 0 ); } function cancelClick() { if (clickTimeout) { clearTimeout(clickTimeout); } } function zoomed() { map.children[0].setAttribute("transform", d3.event.transform); } const zoom = d3 .zoom() .extent([[0, 0], [width, height]]) .translateExtent([[-50, -50], [width + 50, height + 50]]) .scaleExtent([1, 8]) .on("zoom", zoomed); function zoomIn() { d3.select(map) .transition() .call(zoom.scaleBy, 2); } function zoomOut() { d3.select(map) .transition() .call(zoom.scaleBy, 0.5); } const map = svg``; if (width <= 500) { d3.select(map) .call(zoom.scaleBy, 1.5) .call(zoom.translateBy, -50, 0); } const zoomCall = d3.select(map).call(zoom); const dblclickHandler = zoomCall.on("dblclick.zoom"); zoomCall.on("dblclick.zoom", function(d, i, nodes) { cancelClick(); dblclickHandler.call(this, d, i, nodes); }); return map; }