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

Question

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

一些边界是正确的,其他部分更薄,第三部分根本不存在.最近来自Mike Bostock等人的NYT地图解决了这个问题.解决办法是什么？这是我目前的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'});
})