使带有多边形的svg文件可点击

Question

我必须用 JavaScript 构建一个交互式地图。 我读到 d3.js 可以处理 SVG 图像以向 SVG 中的多边形添加点击功能。

有人知道如何在这个 SVG 地图中添加点击功能吗 (link) 目标是让巴伐利亚州的 1300 多个城市可点击，以便在有人悬停或点击多边形时添加一些信息。

如果有人有更好的想法来实现这一点，那当然也可以

Answer 1

这是使用 vanilla js 的一种可能方法。

假设您可以使用 svg inline 并以类似于以下方式组织您想要显示的数据：

const data = {
  municipality_name_one: { name: 'a', size: 1, population: 2, foo: 3 },
  municipality_name_two: { name: 'b', size: 2, population: 3, foo: 4 },
  municipality_name_n: { name: 'c', size: 3, population: 4, foo: 5 },
};

您可以为该文件中的polygons 提供一个id 或一些data-field，它们指向相应的数据，并在父svg 上有一个事件处理程序，当单击polygon 时显示该数据，就像这样：

svg.addEventListener('click', ({ target: { id } }) => {
  if (id in data) {
    const { name, size, population, foo } = data[id];
    alert(`${name} has size of ${size} and pop. of ${population}. ${foo}`);
  }
});

要在悬停时显示数据，您需要使用mouseover 处理程序。 在这两种情况下，您还需要考虑应该再次隐藏数据的事件。这应该可以帮助您入门。