D3 Zoom for SVG Lines and SVG Paths Part Three
Duration: 10:30
Part of Course:
Intermediate D3 Course
This Lesson is for subscribers

Takeaways:
- The D3 Zoom Behavior, d3.behavior.zoom(), constructs a zoom behavior that creates an even listener to handle zoom gestures (panning and zooming) on the SVG elements you apply the zoom behavior onto
- The D3 Zoom Behavior Zooming behavior is made up of being able to zoom in and out
- The D3 Zoom Behavior Panning behavior is made up of being able to pan along the X and Y axis, like a camera panning across an image - everything stays the same distance to everything else, it's just that all of the elements move together
- In cases where you are able to manipulate the X and Y coordinates of your SVG elements, you can use the D3 Scales to change the domain of the D3 Scale function in order to make correct transformations
- In cases, where all you have is the SVG Path Mini-Language instructions (or very complicated SVG paths - like those created in Geographic Data Visualizations), you will use the SVG Transform Attribute for translate (<x> [<y>]) and scale(<x> [<y>]) to not only pan, but also zoom in and out
- To use the D3 Zoom Behavior for complicated SVG Paths, you will use the SVG Transform Attribute - specifically, you will use the D3 Zoom Behavior d3.event.translate for the Panning Behavior and you will use the D3 Zoom Behavior d3.event.scale for the Zooming Behavior
Resources: