添加的信息框更多信息，與SVG和jQuery

Question

在家教「與SVG和jQuery動態地理地圖」，我想用<br>添加的信息框的詳細信息，但是地圖則信息框消失。請看下面的例子。

http://codepen.io/SitePoint/pen/KDHfh

$(function() { 

for(i = 0; i < regions.length; i++) { 

    $('#'+ regions[i].region_code) 
    .css({'fill': 'rgba(11, 104, 170,' + regions[i].population/highest_value +')'}) 
    .data('region', regions[i]); 
} 

$('.map g').mouseover(function (e) { 
    var region_data=$(this).data('region'); 
    $('<div class="info_panel">'+ 
     region_data.region_name + '<br>' + 
     'Test: ' + region_data.test + '<br>' + 
     'Population: ' + region_data.population.toLocaleString("en-UK") + 
     '</div>' 
    ) 
    .appendTo('body'); 
}) 
.mouseleave(function() { 
    $('.info_panel').remove(); 
}) 
.mousemove(function(e) { 
    var mouseX = e.pageX, //X coordinates of mouse 
     mouseY = e.pageY; //Y coordinates of mouse 

    $('.info_panel').css({ 
     top: mouseY-50, 
     left: mouseX - ($('.info_panel').width()/2) 
    }); 
}); 

}); 

Answer 1

我在JS部分稍作修改

首先添加更多的數據

$('<div class="info_panel">' + 
       region_data.region_name + '<br>' + 
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' + 
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' + 
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' + 
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' + 
'Population: ' + region_data.population.toLocaleString("en-UK") + 
       '</div>' 
      ) 

，然後修改這個：

$('.info_panel').css({ 
     top: mouseY - $('.info_panel').height() - 20, 
     left: mouseX - ($('.info_panel').width()/2) 
     }); 

一這似乎解決了這個問題。

檢查修改codepen