JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

CSS

svg {
    border: solid 1px;
}
.text-box {
    stroke: teal;
    stroke-width: 5px;
    fill: black;
    opacity: 0.2;
}
.text {
     fill: teal;
     font-size: 25px;
}

JavaScript

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

var text = svg.append("text")
    .attr("x", 300)
    .attr("y", 100)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .style("font", "50px Helvetica Neue")
    .text("Hello, getBBox!");

var bbox = text.node().getBBox();

var rect = svg.append("rect")
    .attr("x", bbox.x)
    .attr("y", bbox.y)
    .attr("width", bbox.width)
    .attr("height", bbox.height)
    .style("fill", "#ccc")
    .style("fill-opacity", ".3")
    .style("stroke", "#666")
    .style("stroke-width", "1.5px");

svg.on('click', function() {
    var m = d3.mouse(this);
    var g = svg.append('g');
    var rectangle = g.append('rect')
    .attr({ 
        width: 150,
        height: 150,
        x: m[0] - 25,
        y: m[1] - 25,
        fill: 'transparent',
        stroke: 'teal',
        'stroke-width': 2
    });
    var text = g.append('text').text("hello world")
    .attr({ 
        x: m[0],
        y: m[1] + 50,
        fill: 'teal',
    })
    .style({
        'font-size': 20
    });
});