JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="//d3js.org/d3.v4.min.js"></script>
<div id="thediv">

</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"))
                });
})()