Choropleth maps: changing stroke color in `mouseover` shows overlapping boundaries

Question

I have a problem with mouseover events in choropleth maps. I would like to highlight the boundary so that the user can see the currently selected feature. That all works fine expect that some of the boundaries are much thinner or do not exist at all presumably because they are rendered below the boundary of an adjacent feature. Here is an example:

Some of the boundary is correct, other parts are thinner and a third part does not exists at all. The recent NYT maps from Mike Bostock et al solved this problem. What is the solution? Here is my current mouseover code:

.on("mouseover", function(d,i) {
  d3.select(this).transition().duration(300)
    .style({'stroke-opacity':1,'stroke':'#F00'});
})
.on("mouseout", function(d,i) { 
  d3.select(this).transition().duration(300)
    .style({'stroke-opacity':0.4,'stroke':'#eee'});
})

Answer 1

Move the element in question to the last position amongst peers so it draws over all neighbors, like this:

.on("mouseover", function(d,i) {
    d3.select(this.parentNode.appendChild(this)).transition().duration(300)
        .style({'stroke-opacity':1,'stroke':'#F00'});
})