JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<svg id="svg"></svg>

CSS

svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}

JavaScript

var radius = 40;
var svg = d3.select("#svg");
var use = svg.append("use").node();

svg.append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", radius)
    .style("fill", "red");
svg.append("circle")
    .attr("cx", 100)
    .attr("cy", 50)
    .attr("r", radius)
    .style("fill", "green");
svg.append("circle")
    .attr("cx", 75)
    .attr("cy", 75)
    .attr("r", radius)
    .style("fill", "blue");

svg.selectAll("circle")
    .attr("id", function (datum, index) {
        return "c" + (index + 1);
    })
    .on("click", function (datum, index) {
        use.setAttributeNS("http://www.w3.org/1999/xlink",
            "xlink:href",
            "#" + this.id);
        
        // ensure <use> is always last
        svg.append(function () {
            return use;
        });
    });