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

【问题标题】：D3 map - combine two disjoint svg polygon paths into one pathD3 地图 - 将两条不相交的 svg 多边形路径组合成一条路径
【发布时间】：2016-03-02 19:41:18
【问题描述】：

这是我在 interactive map 上的第三个后续问题，带有工具提示。

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

在我的工作中，我最初受到Peter Collingridge svg tutorial 的启发，其中大多数国家的多边形都用svg paths 表示。对于 SVG 地图 的 source，他正在为 Wikimedia 提供建议，我在那里找到了一个 Firefox Mozilla Europe map，其中 country paths 的定义非常明确。

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

在最初的USA dataset 中，甚至由多个多边形组成的状态（例如马萨诸塞州）都用一个唯一的 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 地图中应用 this tool 解决了这个问题，但俄罗斯由具有两个单独 ID 的两条路径组成：id="ru-main" 和 id="ru-kgd"UK 相同。

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

有办法吗？

【问题讨论】：

标签： javascript css d3.js svg

【解决方案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，使用的数据结构与您的问题中提供的数据结构相似。

【讨论】：