Question

这是关于interactive map工具提示的第3个跟进问题。

原始地图使用美国州坐标。我正在尝试建立一张欧洲地图（因此我的previous question排除了一些多边形悬停以绘制大陆的物理形状，但仅允许工具提示仅在欧盟成员之上。）

在我的工作中，我最初以Peter Collingridge svg tutorial 为自己启发，大多数国家多边形都在svg paths中表达。对于{{3>} SVG地图，他正在为维基媒体提供建议，在那里我找到了source，其定义非常明确Firefox Mozilla Europe map。

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

在原始country paths中，由多个多边形组成的偶数状态（如Massachusets）用一个唯一的 d：属性表示。

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

而上述英国和俄罗斯用两种截然不同的 d 来表达：

<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地图中应用USA dataset解决了这个问题俄罗斯由两条带有两个独立ID的路径组成：id="ru-main"和id="ru-kgd"同样适用于英国即可。

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

有办法吗？

Answer 1

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

有办法吗？

您要做的是在国家（<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使用的数据结构类似于您问题中提供的数据结构。

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

1 个答案: