JSFiddle - React, Tailwind, and code Playground

HTML

<body> </body>

JavaScript

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

	var drag = d3.behavior.drag()
    	.origin(function(d) { return d; })
    	.on("dragstart", function(){
    		d3.event.sourceEvent.stopPropagation()
    	})
    	.on("drag", dragmove);

	var svg = d3.select("body")
		.data([{x: 100, y : 100}])
        .append('svg')
        .attr("height", 200)
        .attr("widht", 200)
         .on("mousedown", function(){
         	circle.each(dragmove)
	    });
     

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

    function dragmove(d) {
	  d3.select(this)
	      .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
	      .attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
	}