JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<svg width="200" height="200">
    
</svg>

CSS

circle {
    fill: orange;
    stroke: black;
    cursor: move;
}

svg {
    border: 1px solid black;
}

JavaScript

var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            d3.select(this).attr("transform", function(d,i){
                return "translate(" + [ d.x,d.y ] + ")";
            });
        });
var svg = d3.select("svg");
svg.selectAll("circle")
.data([{"x": 0, "y": 0}])
.enter()
.append("circle")
.attr("r", 50)
.attr("cx", 0)
.attr("cy", 0)
.call(drag);