JSFiddle - React, Tailwind, and code Playground

HTML

<body> </body>

JavaScript

var width = 200,
    height = 200,
    radius = 10;

var isDown = false;

var svg = d3.select("body")
    .data([{x: 100, y : 100}])
    .append('svg')
    .attr("height", 200)
    .attr("widht", 200)
    .on("mousedown", function(){
        isDown = true; 	
        var coordinates = d3.mouse(this);
        circle.each(function(d){
            circle.attr("cx", d.x = coordinates[0])
            circle.attr("cy", d.y = coordinates[1])
        })

    })
    .on("mousemove", function(){
        if(isDown) {
            var coordinates = d3.mouse(this);
            circle.each(function(d){
                circle.attr("cx", d.x = coordinates[0])
                circle.attr("cy", d.y = coordinates[1])
            })
        }
     })
    .on("mouseup", function(){
        isDown = false;
    });     

var circle = svg.append("circle")
    .attr("id", "c1")
    .attr("r", radius)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });