Creating a zoom behavior that scales elements

Another behavior we can create is the zooming/panning ability. Once this functionality is complete, you will be able to zoom in and out on different parts of the graph by doing one of the following:

• A two-finger drag on a trackpad
• Rotating your mouse wheel
• Pinching/spreading on a trackpad

You will also be able to pan left, right, up, and down on the graph by clicking and dragging on the SVG element.

Put the following code at the bottom of app.js:

var zoomCallback = function(){
    d3.select('#points').attr("transform", d3.event.transform);
}

This is the callback function that will be called when the user attempts to zoom or pan. All it does is take the zoom or pan action and turn it into a transform attribute that gets applied to the <g id="points"></g> element that contains the circles. Now...