D3 Zoom for SVG Lines and SVG Paths Part One
  Duration: 8:27
Part of Course: Intermediate D3 Course
This Lesson is for subscribers

D3-zoom-for-svg-lines-and-svg-paths-part-one_280x158
Unlock this lesson NOW!
  • Get expert advice on D3 Zoom for SVG Lines and SVG Paths Part One
  • 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 SVG Straight Line Basic Shape consists of an x1, y1, x2, y2, stroke-width, and stroke color
  • When zooming in and out, you will want the line to get bigger and smaller as well as have the width of the line increase and decrease to show that you have zoomed in and out
  • In terms of the specific coordinates, for zooming in and out on an SVG Straight Line Basic Shape, you will use the scaling functions for the X-Axis and Y-Axis to properly scale the x1, y1, x2, and y2 coordinates for the line
  • In terms of the specific width of the line, for zooming in and out on an SVG Straight Line Basic Shape, you will use the d3.event.scale to multiple the stroke-width by the amount of zooming in and out that you have done

This Transcript is for subscribers.

D3-zoom-for-svg-lines-and-svg-paths-part-one_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on D3 Zoom for SVG Lines and SVG Paths Part One
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index