D3映射 - 将两个不相交的svg多边形路径组合成一个路径

这是我在工具提示interactive map上的第3个跟进问题 .

原始 Map 使用美国州坐标 . 我正在尝试 Build 一个欧洲 Map (因此我的previous question排除了一些多边形悬停以绘制大陆的物理形状,但仅允许工具提示仅在欧盟成员之上) .

在我的工作中,我最初的灵感来自Peter Collingridge svg tutorial,其中大多数国家多边形在 svg paths 中表达 . 对于 SVG maps SVG maps 他正在为维基媒体提供建议,在那里我找到了一个非常明确的country paths Firefox Mozilla Europe map .

一切顺利,直到我偶然发现两个国家:俄罗斯和英国 .

在原始USA dataset偶数由多个多边形组成的状态(如Massachusets)用一个唯一的 d: 属性表示 .

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

而上述英国和俄罗斯则以两种截然不同的方式表达:

<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 Map 中应用_751612解决了这个问题俄罗斯由两条带有两个独立ID的路径组成: id="ru-main"id="ru-kgd" 对于 UK 同样的事情 .

我想确保每当用户徘徊在俄罗斯大陆或加里宁格勒大道上方时,俄罗斯的整个领土都会突出显示 .

有办法吗?

回答(1)

2 years ago

我想确保无论何时用户在俄罗斯大陆或加里宁格勒地区上空盘旋,俄罗斯全境都会突出显示 . 有办法吗?

你想要做的是在国家( <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')
})

这是一个working example使用类似于您的问题中提供的数据结构 .