JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<svg width="100" height="100" id="container">
    <rect width="100" height="100" fill="red" />
</svg>

JavaScript

var svgContainer = document.getElementById('container');
var enterElements = svgContainer.selectAll("rect") 
        .data(series).enter().append("rect")
        .attr("x", function(d, i){
             return xPosLoop[i];
            })
        .attr("height", function(d,i){
             return elementHeight[i];
            })
        .attr("y", function(d, i){
             return yPosLoop[i];
            })
        .attr("width", function(d,i){
             return elementWidth[i];
           })
        .attr("rx", 7)
        .attr("fill", function(d, i){
             return color[i];
            })
        .addEventListener('click', rect_click)
        .attr("stroke", "#006ec5")
        .attr("stroke-width", 1);
 function rect_click(event)
                    {
                        console.log('I was clicked');
                    }