JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mbostock.github.com/d3/d3.js"></script>
JavaScript
var detectionRadius = 15;
var svg = d3.select("body").append("svg:svg")
.attr("width", 500)
.attr("height", 500)
.style("padding", "5px")
.on("mousemove", findshapes)
.on("click", function() {
var nearby = [],
mc = d3.mouse(this),
c1 = {cx: mc[0], cy: mc[1], r: detectionRadius };
svg.selectAll(".detectable").each(function () {
switch (this.nodeName) {
case "circle":
var c2 = {cx: +this.getAttribute("cx"),
cy: +this.getAttribute("cy"),
r: +this.getAttribute("r")};
if (circleOverlapQ(c1, c2))
nearby.push(this.id);
break;
default:
alert("shape not supported");
}
}); // each
if (nearby.length)
alert("These shapes are within click radius: " + nearby.join(", "));
else alert("No shapes within click radius.");
});
function circleOverlapQ (c1, c2) {
var distance = Math.sqrt(
Math.pow(c2.cx - c1.cx, 2) +
Math.pow(c2.cy - c1.cy, 2)
);
if (distance < (c1.r + c2.r)) {
return true;
} else {
return false;
}
}
// Example shapes
svg.append("svg:circle")
.attr("r", 15)
.attr("fill", "red")
.attr("cx", 200)
.attr("cy", 200)
.attr("class", "detectable")
.attr("id", "littleRedCircle");
svg.append("svg:circle")
.attr("r", 55)
.attr("fill", "blue")
.attr("cx", 350)
.attr("cy", 400)
.attr("class", "detectable")
.attr("id", "bigBlueCircle");
svg.append("svg:circle")
.attr("r", 25)
.attr("fill", "green")
.attr("cx", 250)
.attr("cy", 400)
.attr("class", "detectable")
.attr("id", "mediumGreenCircle");
// Mouse visualizer
var mv = svg.append("svg:circle")
.attr("r", detectionRadius)
.attr("stroke",...