D3 for the Impatient

Chapter 4. Events, Interactivity, and Animation

When rendered by a browser, SVG elements can receive user events and can be manipulated as a whole (for example, to change their position or appearance). This means that they behave essentially like widgets in a GUI toolkit. That’s an exciting proposition: to regard SVG as a widget set for graphics. This chapter discusses the options available to create those essential features of a user interface: interactivity and animation.

Events

An important aspect of the DOM is its event model: essentially any DOM element can receive events and invoke an appropriate handler. The number of different event types is very large; most important for our purposes are user-generated events (mouse clicks or movements, as well as keystrokes; see Table 4-1).¹

Table 4-1. Some important user-generated event types

Function	Description
click	Any mouse button is pressed and released on an element.
mousemove	The mouse is moved while over an element.
mousedown, mouseup	A mouse button is pressed or released over an element.
mouseenter, mouseleave	The mouse pointer is moved onto or off of an element.
mouseover, mouseout	The mouse pointer is moved onto or off of an element, or any of its children.
keydown, keyup	Any key is pressed or released.

D3 treats event handling as part of the Selection abstraction (see Table 4-2). If sel is a Selection instance, then you use the following member function to register a callback as event handler ...