D3.js: Mouseover is not triggered on zoomed topojson features - d3.js

Question

I have a US map in topojson format. Users select the state and counties from
dropdownlists. When a user selects the county, the map zooms in to the selected
county.
To do: I need to display the county name when users mouseover the county. I'm
able to do this when the map is first loaded but not when the features are zoomed in.
I'm using a tooltip to display text on mouseover. Following is my code: (A sample version can be viewed at: https://realtimeceap.brc.tamus.edu).
<script>
//globals: create tooptip div
var div = d3.select("body").append("xhtml:div")
.attr("id", "divTip")
.style("position", "absolute")
.attr("class", "tooltip")
.style("opacity", 0);
function zoomToCounty(stname, cnty) {
d3.json("/topo/us-wgs84.json", function (us) {
var conus = topojson.feature(us, us.objects.counties);
//initialize selected county text
d3.select("text").remove();
//reset active to inactive size and color
d3.select("#svgMap2").select("#counties").select(".active")
.style("stroke-width", "0.5px")
.style("stroke", "#808080");
//initialize rect
svg.select("rect").remove();
//zoom to selected county
d3.selectAll(".county")
.classed("active", function (d) {
if (d.properties.StateName === stname && d.properties.County === cnty) {
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.call(d3.zoom()
.scaleExtent([.05, 8])
.on("zoom", moveWheel))
//zoom in to max scale extent
var zoom_in = d3.zoom()
.scaleExtent([.05, 8])
.on("zoom", zoomedIn);
//get path of selected county
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height))),
translate = [width / 2 - scale * x, height / 2 - scale * y];
//add text at coordinates inside a group
d3.select("#svgMap2").select("#counties")
.append("text")
.style("fill", "black")
.style("font-size", "20px")
.attr("x", width / 2) //center the text
.attr("y", height / 2)
.attr("text-anchor", "middle") //set anchor y justification
.text($("#countySelect").val());
d3.select("#svgMap2").select("#counties")
.transition()
.duration(1000)
.call(zoom_in.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)); //center
return true;
}
});
//hover over counties
d3.select("#counties").selectAll(".county")
.enter().append("path")
.attr("d", path)
.attr("name", function (d) { return d.properties.County; }, true)
.attr("id", function (d) { return d.properties.FIPS; }, true)
.style("stroke-width", "0.5px") //inactive border width
.on("mouseover", function () {
d3.select(this)
.style("stroke", "#ff5800");
div.transition()
.duration(300)
div.text(function () {
if (d.properties.StateName === stname && d.properties.County === cnty) {
return $("#countySelect").val();
} else {
return d.properties.County;
}
})
.style("opacity", 1)
.style("class", "label")
.style("left", (d3.event.pageX) - 10 + "px")
.style("top", (d3.event.pageY) - 5 + "px");
})
.on("mouseout", function () {
d3.select(this)
.style("stroke", "#808080");
div.transition()
.duration(300)
.style("opacity", 0);
});
}); //end d3.json
}

Answer 1

Found a solution. I needed to "attach" the mouseover code on the "rect". I replaced the codes on "hover over counties" portion as follows:
//initialize rect
svg.select("rect").remove();
//hover over counties
d3.selectAll(".county", function (d) {
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.call(d3.zoom()
.scaleExtent([.05, 8])
.on("zoom", moveWheel))
.on("mouseover", function (d, i) {
d3.select(this)
.style("stroke", "#ff5800")
div.transition().duration(300)
div.text(function (d) { return conus.features[i].properties.County })
.style("opacity", 1)
.style("class", "label")
.style("left", (d3.event.pageX) - 10 + "px")
.style("top", (d3.event.pageY) - 5 + "px");
})
.on("mouseout", function (d) {
div.transition().duration(300)
.style("opacity", 0);
})
});