title: D3.js v4 Separate Drag and Zoom/Pan
body: <p>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:</p>
  
  <ol>
  <li>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.</li>
  <li>Once I am able to grab the square again, the zoom renders to the very original zoom layer, not the current zoom.</li>
  </ol>
  
  <p>Here is a <a href="http://jsfiddle.net/chiaramdelucia/ud27evu0/49/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>I found this <a href="https://stackoverflow.com/questions/46619153/d3-zoom-and-pan-with-rect-drag">answer</a> that recommends adding:</p>
  
  <p><code>square.on("mousedown", function() { d3.event.stopPropagation(); });</code></p>
  
  <p>but have not had any luck.</p>
  
  <p>TIA</p>