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

jquery
svg

2016-11-04 63 views 0 likes

在家教“与SVG和jQuery动态地理地图”，我想用<br>添加的信息框的详细信息，但是地图则信息框消失。请看下面的例子。添加的信息框更多信息，与SVG和jQuery

$(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) 
    }); 
}); 

});

来源

2016-11-04 user2208982

回答

我在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

来源

2016-11-04 18:04:28

哇。这行得通。非常感谢你，SAURABH夏尔马 – user2208982

@ user2208982请标出答案接受，如果它已经解决了您的问题 –

我只是做了。谢谢 – user2208982

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

回答

相关问题