O'Reilly logo

D3.js By Example by Michael Heydt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using behaviors to drag, pan, and zoom

Mouse events often need to be combined to create more complex interactions such as drag, pan, and zoom. Normally, this requires a good quantity of code to track sequences of the mouseenter, mousemove, and mouseexit events.

D3.js provides us with a better way of implementing these interactions through the use of behaviors. These behaviors are a complex set of DOM/SVG interactions through D3.js itself handling the mouse events. In a sense, behaviors function similarly to gesture recognizers on mobile platforms.

D3.js currently provides two built-in behaviors:

  • Drag: This tracks mouse or multi-touch movements relative to an origin
  • Zoom: This emits zoom and pan events in response to dragging or pinching

Let's examine ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required