Home » Javascript » D3.js v4 Separate Drag and Zoom/Pan

D3.js v4 Separate Drag and Zoom/Pan

Posted by: admin November 1, 2017 Leave a comment


I have code that draws a square and plots points inside a canvas element. I use a d3.drag function to drag the square separate from the points and a d3.zoom function to zoom on BOTH the points and the square as well as pan both. The problem I’m having is two-fold:

  1. Once zoomed, I sort of lose the ability to drag the square. Sort of in the sense that if you click around enough (typically the original spot of the square, not current), you can grab the square again.
  2. Once I am able to grab the square again, the zoom renders to the very original zoom layer, not the current zoom.

Here is a jsFiddle

I found this answer that recommends adding:

square.on("mousedown", function() { d3.event.stopPropagation(); });

but have not had any luck.