draggingsvg.js

// This is inside of our React.Component

componentDidMount() {
  //   ... the clicking code was up here
  const zoom = d3.zoom()
      .scaleExtent([1, 5])
      .translateExtent([[-100, -100], [svgViewportWidth-500, svgViewportHeight-500]])
      .on('zoom', zoomed);
  
  function zoomed() {
    const {k, x, y} = d3.event.transform;
    // This moves the map!
    contentWrap.attr('transform', `translate(${x},${y}) scale(${k})`);
  }
  
  // We turn on pointer events for TWO things
  // 1. the circles that we click on
  // 2. the background rectangle (see below) that handles dragging events
  // And we turn them off for everything else in contentWrap
  const contentWrap = d3.select('#contentWrap');
  contentWrap.attr('pointer-events', 'none');
  
  // It's below the map because our circles from earlier need to be on top!
  svg.append('rect')
    .attr('class', 'mouse-capture')
    .attr('x', -5000)
    .attr('y', -5000)
    .attr('width', 15000)
    .attr('height', 15000)
    .style('fill', 'white')
    .lower() // put it below the map
    .call(zoom);
}