Minimal Drag Example

1. new event called drag
2. d3.drag() is similar to d3.zoom() in the previous example

Example

https://bl.ocks.org/codetricity/7ced6f3b3c95d64e7d7467e430716a63

Set Up

    var svg = d3.select("body").append('svg')
        .attr('width', '400')
        .attr('height', '400')
        .style('border', 'solid 1px');

Create Circle

    var circle = svg.append("circle")
        .attr("cx", 50)
        .attr("cy", 50)
        .attr('r', 20);

New event called drag

    var dragHandler = d3.drag()
        .on('drag', dragged);

new event handler

The function can have any name.

    function dragged() {
        var current = d3.select(this);
        current
            .attr('cx', d3.event.x)
            .attr('cy', d3.event.y);                   
            console.log(`${d3.event.x}, ${d3.event.y}`);
    }

Call event handler

    dragHandler(circle);

Additional Information

longer example is here.

Note that the color scheme in the longer example above is no longer valid as of d3 v5.