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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.