JSFiddle - React, Tailwind, and code Playground

CSS

svg {
    border: 1px dashed lightblue;
    padding: 1em;
}

JavaScript

/* D3 init ******************************************* */
var svg = window.d3.select("body")
    .append("svg")
        .attr("id","L1")
        .attr("style","fill:#CCC;fill-opacity:.8")
        .attr("width", 200)
        .attr("height", 200);

/* RANDOM DATAD3 MODULE ****************************** */
var data = []; 
for(i=0; i<5; i++){
    data.push({ 
        x: Math.round(Math.random()*200),
        y: Math.round(Math.random()*200),
        r: Math.round(Math.random()*25)
    });
}
console.log(data)
svg.selectAll("circle")
        .data(data)
    .enter().append("circle")
        .attr("cx", function(d){return d.x })
        .attr("cy", function(d){return d.y })
        .attr("r" , function(d){return d.r })
        .attr("name" , function(d,i){return "circle_"+i; });

/* getBBox ****************************** */
var nodes = window.d3.selectAll("#L1 > *"); // SO: /29278107/
for(var j=1;j<= nodes[0].length;j++){
    nodes.attr("style",null)
    var node = window.d3.selectAll('#L1 > *:nth-child('+j+')');
    var bbox     = node.node().getBBox();
    var nodeName = node.attr("name");
    var centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
    node.attr("style", "fill:#B10000;")
    console.log("Paint & print: "+j+", name: "+nodeName+"; centroid: "+centroid+" .")
    console.log(bbox);
//  fs.writeFileSync('ouput.svg', svgheader + window.d3.select("body").html()) 
}