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

Question

我正在制作美国的SVG地图，当您将鼠标悬停在每个州时，会显示一个指向每个州的小信息窗口，该窗口显示人口，类似于Google Maps的信息窗口。 不幸的是，我对JSON不太满意，所以我停留在这一点上。

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

这是JSON数据的示例：

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

由于SVG路径，HTML相当多，因此我不会在此处粘贴它，但是您可以看到到目前为止我在此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/