JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

JavaScript

var width = 240,
	height = 125,
	radius = 20;

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("body").append("div").selectAll("svg")
	.data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
	.enter()
	.append("svg")
	.attr("width", width)
	.attr("height", height);

var svgG = svg.append("g")
    .attr("transform", function(d) { return "translate(" + [ d.x,d.y ] + ")"; })
    .call(drag);

svgG.append("circle")
	.attr("r", radius);

svgG.append("text")
	.attr("x", 30)
	.attr("y", 35)
	.text("testtesttest")
	.attr("fill", "#000");