等值线图：在“鼠标悬停”中改变笔划颜色显示重叠的边界

Question

我在choropleth地图中遇到鼠标悬停事件的问题。我想突出显示边界，以便用户可以看到当前选定的功能。一切正常，期望一些边界更薄或根本不存在，大概是因为它们被渲染到相邻特征的边界之下。这是一个例子：

一些边界是正确的，其他部分更薄，第三部分根本不存在。最近来自Mike Bostock等人的NYT maps解决了这个问题。解决办法是什么？这是我当前的mouseover代码：

.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

将有问题的元素移动到对等体中的最后一个位置，以便它覆盖所有邻居，如下所示：

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