Important D3 Zoom FAQ
  Duration: 11:23
Part of Course: Intermediate D3 Course
This Lesson is for subscribers

Important-d3-zoom-faq_280x158
Unlock this lesson NOW!
  • Get expert advice on Important D3 Zoom FAQ
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

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
  • The D3 Zoom Behavior listens to one specific event named the "zoom" event, which means you only have to write one function to encapsulate the D3 Zoom Behavior
  • The D3 Zoom Behavior only works on specific SVG elements you have applied the zoom behavior onto, so if you or your audience tries to zoom in on an blank part of your data visualization, the D3 Zoom Behavior won't work
  • Which means that to use the D3 Zoom Behavior so that you and your audience can actually zoom on any part of the data visualization, you need to include a hidden SVG element behind every other SVG element you draw, so that it can capture and use the D3 Zoom Behavior regardless of where you and your audience try to use the zoom behavior

This Transcript is for subscribers.

Important-d3-zoom-faq_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on Important D3 Zoom FAQ
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index