javascript - 在 SVG 路径悬停时显示来自 JSON 的数据？

Question

我正在制作美国的 SVG map ，当您将鼠标悬停在显示人口的每个州上时，我想显示一个指向每个州的小信息窗口，类似于 Google map 上的信息窗口。不幸的是，我不太擅长 JSON，所以我被困在了这一点上。

目前我有美国的 SVG map ，通过 CSS 悬停时填充颜色会发生变化。我有一组 JSON 数据示例，想知道如何将其合并到我的 map 中，以便在悬停时显示人口。

这是 JSON 数据的示例:

[
  {
    "id":"AL", 
    "population":"253045"
  },
  {
    "id":"AR",
    "population":"1529923"
  },
  {
    "id":"AZ",
    "population":"352416t"
  }
]

由于 SVG 路径，有相当多的 HTML，因此我不会将其粘贴到此处，但您可以看到我目前拥有的内容 on this JSFiddle

Answer 1

要获取有关悬停状态的信息，首先将您的信息放入一个数组中，以便可以访问它:

var info = [
  {
    "id":"AL", 
    "population":"253045"
  },
  {
    "id":"AR",
    "population":"1529923"
  },
  {
    "id":"AZ",
    "population":"352416t"
  }
]

然后您可以通过使用 filter 的 id 键从数组中获取信息:

info.filter(function(state) {return state.id === currState});

这是一个示例，您可以在其中获取悬停状态的人口:

$('path').hover(function() {
    var currState = $(this).attr('id');
    var currStateInfo = info.filter(function(x) {return x.id == currState});
    if (currInfo[0])
        console.log(currInfo[0].population);
});

这是一个工作示例:https://jsfiddle.net/4tasLo6k/