某些地图路径的描边是碎片化的

Question

我使用两个json文件创建了一张欧洲地图。 当用户双击某个国家/地区时，该国家/地区将进行缩放并显示其区域。

现在我希望当用户将鼠标悬停在某个国家/地区上时，相应路径的边缘会改变颜色。这是一件非常容易的事。 以下是执行此操作的代码段：

mapSvgGCountryPath.attr('class', 'country')
    .attr('fill', 'black')
    .style('stroke', 'white')
    .style('stroke-width', 2) 
    .attr('d', path)
    .attr('id', function(c) {
        return 'country' + c.properties.nuts_id; 
    })
    .on('click', clickOrDoubleCountry)
    .on('mouseover', function(d) {
        d3.select(this).style('stroke', 'red');
    })
    .on('mouseout', function(d) {
        d3.select(this).style('stroke', 'white');
    });

问题是结果不起作用：

一些国家的边界​​被打破（似乎各国分享了一些中风）。 是由于json文件是如何制作的？ In my previous question我解释了我是如何获得这些文件的。

我该如何解决？

PLUNKER

Answer 1

没有＆＃34;国家分享笔画＆＃34; 。这里的问题只是一个<path>超过另一个。

只需raise您悬停的国家/地区，将其移至父组的底部：

.on('mouseover', function(d) {
    d3.select(this).style('stroke', 'red').raise();
})

这里的逻辑是最后绘制的元素仍然位于其他元素之上。

以下是更新的Plunker：http://plnkr.co/edit/R96JM4ZZrAJ8X1YuUWdO?preview&p=preview