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;
    });
  });