Question

我正在制作美国的SVG地图，我想显示一个指向每个州的小信息窗口，当您将鼠标悬停在显示人口的地方时，类似于Google地图上的信息窗口。不幸的是，我对JSON不是很好，所以我现在陷入困境。

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

以下是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"
  }
]

然后，您可以使用id按filter键对数据中的信息进行过滤：

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/

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

1 个答案: