D3.js Quick Start Guide

Dragging an element

We want to be able to update the data for a run by dragging the associated circle. To do this, we'll use a behavior, which you can think of as a combination of multiple event handlers. For a drag behavior, there are three callbacks:

• When the user starts to drag
• Each time the user moves the cursor before releasing the mouse button
• When the user releases the mouse button

There are two steps whenever we create a behavior:

1. Create the behavior
2. Attach the behavior to one or more elements

Put the following code at the bottom of the render() function declaration:

//put this code at the end of the render function
var drag = function(datum){
    var x = d3.event.x;
    var y = d3.event.y;
    d3.select(this).attr('cx', x);
    d3.select(