zoom-implementation.js

 // save the current zoom in this object 
// this is useful for redraws later on 
var currentTransform = null;
// add a subview with a group tag - we'll add objects to this later
 var view = svg.append("g")
        .attr("class", "view");
// you would execute this on any draw action to adjust zoom
 if (currentTransform) view.attr('transform', currentTransform); 

// this is d3's main zoom plugin - 
var zoom = d3.zoom()
// scale extent is the min and max I can zoom, 50% original size to zoom out and 5x times zoom in.
    .scaleExtent([0.5, 5]) 
// Translate Extent is how far I can pan from the top left-hand corner [x,y] to bottom right hand [x,y]
    .translateExtent([
        [-width * 2, -height * 2],
        [width * 2, height * 2] 
    ]) 
// this allows us to make additional necessary transformations on zoom
    .on("zoom", zoomed); 
      
   function zoomed() {
    currentTransform = d3.event.transform;
    view.attr("transform", currentTransform);
    gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
    gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
}
  svg.call(zoom);