title: Choropleth maps: changing stroke color in `mouseover` shows overlapping boundaries
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/ChqE6.png" alt="enter image description here"> </p>
  
  <p>Some of the boundary is correct, other parts are thinner and a third part does not exists at all. The recent <a href="http://www.nytimes.com/2013/07/22/business/in-climbing-income-ladder-location-matters.html?hp&amp;_r=0" rel="nofollow noreferrer">NYT maps</a> from Mike Bostock et al solved this problem. What is the solution? Here is my current <code>mouseover</code> code:</p>
  
  <pre><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'});
  })
  </code></pre>