D3.js: Cutting-edge Data Visualization

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