d3.js - 等值线图 : changing stroke color in `mouseover` shows overlapping boundaries

Question

我对等值分布图中的鼠标悬停事件有问题。我想突出显示边界，以便用户可以看到当前选择的功能。一切正常，期望某些边界更薄或根本不存在，大概是因为它们呈现在相邻特征的边界下方。下面是一个例子:



一些边界是正确的，其他部分更薄，第三部分根本不存在。近期NYT maps Mike Bostock 等人解决了这个问题。解决办法是什么？这是我现在的 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'});
})