Choropleth地图：在“mouseover”中更改笔划颜色显示重叠边界 [英] Choropleth maps: changing stroke color in `mouseover` shows overlapping boundaries

问题描述

我在choropleth地图中的mouseover事件有问题。我想突出显示边界，以便用户可以看到当前选择的功能。所有工作都很好，期望一些边界更薄或根本不存在，因为它们被呈现在相邻特征的边界之下。以下是一个示例：

一些边界是正确的，其他部分较薄，第三部分根本不存在。最近的来自Mike Bostock等人的NYT地图解决了这个问题。解决办法是什么？这是我目前的 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 b .style（{'stroke-opacity'：0.4，'stroke'：'＃eee'}）; 
}）
  

解决方案

将有问题的元素移动到同行之间的最后一个位置，以便绘制所有邻居，如下：

  .on（mouseover，function（d，i）{
 d3.select（this.parentNode.appendChild（this））。 duration（300）
 .style（{'stroke-opacity'：1，'stroke'：'＃F00'}）; 
}）
  pre> 
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:

 

Some of the boundary is correct, other parts are thinner and a third part does not exists at all. The recent NYT maps from Mike Bostock et al solved this problem. What is the solution? Here is my current mouseover 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'});
})

解决方案
Move the element in question to the last position amongst peers so it draws over all neighbors, like this:
.on("mouseover", function(d,i) {
    d3.select(this.parentNode.appendChild(this)).transition().duration(300)
        .style({'stroke-opacity':1,'stroke':'#F00'});
})


                        
这篇关于Choropleth地图：在“mouseover”中更改笔划颜色显示重叠边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！