JSFiddle - React, Tailwind, and code Playground

JavaScript

var mousemove = function(d){
    var bbox = this.getBBox();
    div.text("x: " + bbox.x + ", y: " + bbox.y + ", h: " + bbox.height + ", w: " + bbox.width);
};

var svg = d3.select("body").append("svg");
var div = d3.select("body").append("div");

svg
    .attr("height", "100")
    .attr("width", "400");

var gCircle = svg.append("g");
var gRect = svg.append("g");
var gPath = svg.append("g");

gCircle.append("circle")
    .attr("r", 10)
    .attr("cx", 20)
    .attr("cy", 20)
    .attr("fill", "#333")
    .on("mousemove", mousemove);

gRect.append("rect")
    .attr("x", 80)
    .attr("y", 10)
    .attr("width", 100)
    .attr("height", 20)
    .attr("fill", "#ccc")
    .on("mousemove", mousemove);

gPath.append("path")
    .attr("d", "M 250 10 L 320 10 L 350 50 L 290 65 z")
    .attr("fill", "red")
    .on("mousemove", mousemove);