JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viz"></div>

JavaScript

var vizSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 400)
    .attr("height", 300);
    
vizSVG.append("svg:circle")
    .attr("id", "blueCircle")
    .attr("cx", 50)
    .attr("cy", 140)
    .attr("r", 40)
    .attr("fill", "blue")
.call(d3.behavior.drag().on("drag", move));
    
vizSVG.append("svg:circle")
    .attr("id", "redCircle")
    .attr("cx", 100)
    .attr("cy", 140)
    .attr("r", 40)
    .attr("fill", "red")
.call(d3.behavior.drag().on("drag", move ));

function move(domElement){
    this.parentNode.appendChild(this);
    var dragTarget = d3.select(this); //This is a d3 selection of the circle
    dragTarget
        .attr("cx", function(){return d3.event.dx + parseInt(dragTarget.attr("cx"))})
        .attr("cy", function(){return d3.event.dy + parseInt(dragTarget.attr("cy"))});
};