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

lon*_*lon 5 d3.js

我使用两个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');
    });
Run Code Online (Sandbox Code Playgroud)

问题是结果不起作用:

在此输入图像描述

一些国家的边界​​被打破(似乎各国分享了一些中风).是由于json文件是如何制作的?在我之前的问题中,我解释了如何获取这些文件.

我怎么解决?

PLUNKER.