Implementing drag behavior

Another common behavior in interactive visualization that we will cover in this chapter is dragging. Drag is useful to provide capabilities in visualization that allow graphical rearrangement or even user input through force; we will discuss this in the next chapter. In this recipe, we will explore how the drag behavior is supported 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/drag.html

How to do it...

Here, we will produce four circles that can be dragged using D3 drag behavior support and additionally with SVG boundary detection while being dragging. Now, let's see how to implement this in code:

<script type="text/javascript"> 
    var width = 960, height = 500, r = 50; 
 
    var data = [ 
        [width / 2 - r, height / 2 - r], 
        [width / 2 - r, height / 2 + r], 
        [width / 2 + r, height / 2 - r], 
...