詳細情報をSVGとjQueryで表示する

Question

チューター "SVGとjQueryを使用した動的ジオマップ"で、<br>を使用して情報ボックスに情報を追加したいが、情報ボックスは消える。下記の例をご覧ください。

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

A：

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>' 
      ) 

の最初にして、これを変更しなかった

問題を解決したようだ。

チェック修正codepen