Interacting with mouse events

The mouse is the most common and popular human-computer interaction control found on most desktop and laptop computers. Even today, with multi-touch devices rising to dominance, touch events are still commonly emulated with mouse events. In this recipe, we will learn how to handle standard mouse events in D3.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter10/mouse.html

How to do it...

In the following code example, we will explore techniques of registering and handling mouse events in D3. Although in this particular example we are handling only click and mousemove, the techniques utilized here can be applied easily to all other standard mouse events supported by modern browsers:

<script type="text/javascript"> 
    var r = 400; 
 
    var svg = d3.select("body") 
            .append("svg"); 
 
    var positionLabel = svg.append(...