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

Question

我必须在JavaScript中构建一个交互式地图。我读到d3.js可以处理SVG图像，以便向SVG中的多边形添加单击函数。

谁知道如何添加点击功能到这个SVG地图(link)的目标是使巴伐利亚州的1300+市政当局可以点击，以添加一些信息，如果有人悬停或点击多边形。

如果有人有更好的想法来实现这一点，那么当然也没问题。

Answer 1

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

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

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 },
};

您可以为该文件中的polygon提供一个指向相应数据的id或一些data-field，并在父polygon上有一个事件处理程序，该处理程序在单击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处理程序。在这两种情况下，您还需要考虑应该再次隐藏数据的事件。这应该会帮助你入门，尽管。