從SVG路徑懸停的JSON顯示數據？

我正在製作美國的SVG地圖，我希望顯示一個指向每個州的小型信息窗口，當您將鼠標懸停在上面時，可以顯示人口，類似於Google地圖上的信息窗口。不幸的是，我對JSON不太瞭解，所以我被困在這一點上。從SVG路徑懸停的JSON顯示數據？

目前我有美國的SVG地圖，並通過CSS懸停填充顏色的變化。我有一個JSON數據樣本組，並想知道如何將它合併到我的地圖中，以便它顯示懸停時的總體。

這裏的JSON數據的例子：

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

有相當一些HTML由於SVG路徑，所以我不會粘貼在這裏，但你可以看到我有這麼遠on this JSFiddle

來源

2016-02-04 user13286

爲了獲取信息有關懸停狀態，首先把你的信息在一個數組，所以它可以訪問：

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

然後，你可以通過過濾過b從你的陣列信息y中的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/

來源

2016-02-04 18:31:49

感謝你爲這個，你會介意更新我的JSFiddle鏈接嗎？我嘗試將你的代碼添加到我的小提琴中，並且我得到'不能讀取未定義的屬性'人口' – user13286

這是因爲info沒有所有的狀態，所以它找不到正確的。我添加了另一行來防止這種情況：'if（currInfo [0]）'。我也鏈接到一個工作小提琴。 –

太棒了，這正是我一直在尋找的，謝謝！ – user13286

從SVG路徑懸停的JSON顯示數據？

回答

相關問題