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
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 ...