When panning graphic moves less than mouse pointer

Community Help
1

I’m relatively new to D3. I created a D3-based azimuthal map site for ham radio enthusiasts. This kind of map shows a radio operator the distance and bearing (i.e., where to point your antenna for the shortest path) for everywhere on the globe from a particular location.

If one clicks on the map and then drags the mouse pointer, the map graphics pan along with the mouse (as expected). However, the graphics move much less than the mouse pointer (not expected). The difference between mouse movement and graphics movement grows if one zooms in before doing the click and drag.

I’ve been googling and reading for the last few days, and I haven’t been able to find a fix. Here are the excerpts from test.html that related to zooming and panning. The site uses d3 version 7.

From Azimuthal map with grayline :

   var zoomBehavior = d3.zoom().scaleExtent([1,100]).on("zoom", function() {
       let mapcontent=d3.select("#mapcontent");
       console.log(d3.zoomTransform(this));
       mapcontent.attr("transform", d3.zoomTransform(this));
  });

   function resetWheelZoomTranslate() {
       console.log("Reseting");
       let mapcontent = d3.select("#mapcontent");
       mapcontent.transition().duration(200).call(zoomBehavior.transform, d3.zoomIdentity);
   }

In my page initialization, I have:

d3.select("#mapcontent".call(zoomBehavior);

It’s also kind of jittery when panning, but I can live with that.

Thanks,

Tom NS6T

2

This is typically happening when the zoom transform is applied to the same DOM element that has the zoom listener—it creates a moving target. It should work as expected if you apply the listener to the parent of #mapcontent (in this case, I believe #clippedcontent).

3

Thanks. Your suggestion resolved my issue!