D3 map - 将两个不相交的 SVG 多边形路径合并为一个路径

D3 map - combine two disjoint svg polygon paths into one path

本文关键字：路径 多边形 SVG 合并 一个 map 两个 D3      更新时间：2023-09-26

这是我在带有工具提示的交互式地图上的第三个后续问题。

原始地图使用美国各州的坐标。我正在尝试构建欧洲地图（因此我之前的问题关于排除悬停中的某些多边形以绘制大陆的物理形状，但仅允许在欧盟成员国上方使用工具提示）。

在我的工作中，我最初受到彼得·科林里奇 svg 教程的启发，其中大多数国家多边形都用 svg paths 表示。对于SVG地图的来源，他正在为维基媒体提供建议，在那里我找到了一张Firefox Mozilla欧洲地图，其中有非常明确的国家路径。

一切都很顺利，直到我偶然发现了两个国家：俄罗斯和英国。

在原始的美国数据集中，即使是由多个多边形组成的状态（如马萨丘集）也用一个唯一的 d： 属性表示。 

{id:"MA",n:"Massachusets", d:"M899.62349,(...), 153.35923L855.45082,152.06593Z"},

而上面提到的英国和俄罗斯用两个不同的 ds 表示：

<g id="ru" transform="matrix(1.43317, 0, 0, 1.43317, -2435.49, -1086.58)">
<path id="ru-main" d="M 9462.6109,(...),2763.2929 z "/>
<path id="ru-kgd"  d="M 6989.6109,(...),3728.389 z "/>
</g>

另外还有这个属性transform = "matrix(...)"

尽管如此，我已经通过在Mozilla Firefox地图中应用此工具解决了这个问题 俄罗斯由两条路径组成，有两个单独的ID：id="ru-main"和id="ru-kgd"英国相同。

我想确保每当用户悬停在俄罗斯大陆或加里宁格勒地带上方时，俄罗斯的整个领土都会突出显示。

有没有办法做到这一点？

我想确保每当用户悬停在俄罗斯大陆或加里宁格勒地带上方时，俄罗斯的整个领土都会突出显示。

有没有办法做到这一点？

您要做的是在国家/地区（<g>）级别观看鼠标事件，并将悬停效果应用于所有悬停<g>子元素<path>元素。

var countries= d3.selectAll('g')
countries.on('mouseenter', function(d, i) { //mouse starts hovering a country's shape
  d3.select(this)             // select the hovered country
    .selectAll('path')        // select all its children paths
    .style('fill', '#75D9FA') // apply desired effect to the paths
})
countries.on('mouseleave', function(d, i) { //mouse stops hovering a country's shape
  // follow same logic as above to reset original style
  d3.select(this)
    .selectAll('path')
    .style('fill', '#24BDF0')
})

这是一个使用类似于问题中提出的数据结构的工作示例。

相关文章：