JSFiddle - React, Tailwind, and code Playground

by Davide Vozzi

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

JavaScript

var canvas = d3.select("body")
	.append("svg")
	.attr("width", 300)
	.attr("height", 300)
	//.on("mousemove", handleMouseMove);
             
var g = canvas.selectAll("g")
	.data([1])
	.enter()
	.append("g")
	.on("mouseover", handleMouseOver)
	.on("mouseout", handleMouseOut)
	

g.append('circle').classed('invisible', true)
	.attr("cy", 50)
    .attr("cx", 50)
    .attr("r", 40)
    .style({"fill": "transparent"});
					
g.append('circle').classed('visible', true)
	.attr("cy", 50)
    .attr("cx", 50)
    .attr("r", 20)
    .style({"fill": "grey"});

    function handleMouseOver(d,i){
    	d3.select(this).select('.visible').transition()
    		.style({"fill": "red"});    		
    };

    function handleMouseOut(d,i){
    	d3.select(this).select('.visible').transition()
    		.style({"fill": "green"});    		
    };

    function handleMouseMove(){
    	var coordinates = [];
		  coordinates = d3.mouse(this);
		  var x = coordinates[0];
		  var y = coordinates[1];
		  console.log(x,y);
		  if (x>10 && x<90 && y>10 && y<90) {
		  	d3.select('.visible').style({"fill": "red"});
		  }
		  else {
		  	d3.select('.visible').style({"fill": "green"});
		  }

    }