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

Get Data Visualization with D3 4.x Cookbook - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.