JSFiddle - React, Tailwind, and code Playground

JavaScript

var circleData = [
       { "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
       { "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
                   
var svgContainer = d3.select("body").append("svg")
                                     .attr("width",400)
                                     .attr("height",200);
                                     
var circleGroup = svgContainer.append("g");

var circles = circleGroup.selectAll("circle")
                          .data(circleData)
                          .enter()
                          .append("circle")
                          .on("mouseover", mouseover)
                          .transition().duration(1600)
                          .attr("transform", function(d) { return "translate(" + 80  + ")"; });;

var circleAttributes = circles
                      .attr("cx", function (d) { return d.cx; })
                      .attr("cy", function (d) { return d.cy; })
                     .attr("r", function (d) { return d.radius; })
                 .style("fill", function (d) { return d.color; });
 
function mouseover()
{
    var self = d3.select(this);
    alert(self.attr('cx'));
}