Here I am experimenting with mouse events...
xxxxxxxxxx
<html>
<head>
<!-- from https://bl.ocks.org/mbostock/1062544 -->
<!-- from https://bl.ocks.org/mbostock/9539958 -->
<!-- from https://bl.ocks.org/mbostock/1276463 -->
<!-- from https://bl.ocks.org/mbostock/4198499 -->
<meta charset='utf-8'>
<title>Mouse Events 1</title>
<style>
body {
margin: 0;
background: LightSteelBlue;
min-width: 960px;
}
rect {
fill: none;
pointer-events: all;
}
circle {
fill: none;
stroke-width: 2.5px;
}
</style>
</head>
<body>
<div class="myText"></div>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
// set up the svg container
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var myRect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.on("mousemove", mouseMove);
var myText = d3.select(".myText").text("");
function mouseMove() {
var m = d3.mouse(this);
// update the text with the x and y coordinates of the mouse
myText.text(m);
// insert the circle
svg.insert("circle", "rect")
.attr("cx", m[0])
.attr("cy", m[1])
.attr("r", 10)
.style("stroke", 2)
.style("fill", "SteelBlue")
.transition()
.duration(2000)
.ease(Math.sqrt)
.attr("r", 20)
.style("fill", "SteelBlue")
.remove();
d3.event.preventDefault();
}
</script>
</body>
</html>
https://d3js.org/d3.v3.min.js