JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="//d3js.org/d3.v4.min.js"></script>
<div id="thediv">
  <svg>
    <rect id="rect1" width="100" height="100" x="10" y="10" fill="blue"></rect>
    <rect id="rect2" width="100" height="100" x="200" y="10" fill="blue"></rect>
  </svg>
</div>

JavaScript

(function() {
  var svg = d3.select("#thediv")
    .append("svg")

  var rect1 = svg.append("rect")
    .attr("id", "rect1")
    .attr("width", "100")
    .attr("height", "100")
    .attr("x", "10")
    .attr("y", "10")
    .attr("fill", "blue")
    .on("click", function() {
      console.log("hey", d3.select(this).attr("id"))
    });;

  var rect2 = svg.append("rect")
    .attr("id", "rect2")
    .attr("width", "100")
    .attr("height", "100")
    .attr("x", "200")
    .attr("y", "10")
    .attr("fill", "blue")
    .on("click", function() {
      console.log("hey", d3.select(this).attr("id"))
    });
})()