I am currently working on a d3 map with zoom functionality that displays circles representing different cities. However, I am facing an issue where the mouseover event for the circles (which shows tooltips and clicking reveals some lines) seems to only register near the perimeter of the circle rather than the entire shape. I have not yet identified a clear pattern causing this behavior. Here is the relevant code snippet:
CSS:
circle {
stroke-width: 1.5px;
stroke: "green";
cursor: pointer;
}
Javascript:
var node = g.selectAll(".node")
.data(data.nodes)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[0];
})
.attr("cy", function(d) {
return projection([-1 * d.lon, -1 * d.lat])[1];
})
.attr("r", 3)
.style("fill", function(d) {
return line_color([Math.floor(d.diversity * num_lines)])
})
.style("stroke", "#000000")
.style("stroke-width", "0.05px")
.on('mouseover', tip.show)
.on("click", fade(0))
.on('mouseout', tip.hide);
You can view the issue in action here