JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

JavaScript

var data = ["TEXT SAMPLE"], r = 15;

var svg = d3.select("svg");
var bar = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(100,100)"; });

bar.append("rect")
    .attr("width", 200)
    .attr("height", 100)
    .on("mouseover",function(){
        d3.select(this.nextSibling)
            .attr("opacity", "1")
    })
    .on("mouseout",function(){
        d3.select(this.nextSibling)
            .attr("opacity", "0")
    });

bar.append("text")
    .attr("dy", "-.35em")
    .attr("opacity", "0")
    .text(function(d) { return d; });