d3.js - Choropleth 地图：在“鼠标悬停”中更改笔触颜色显示重叠边界

Question

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

一些边界是正确的，其他部分更薄，第三部分根本不存在。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'});
})