今天在对一个统计页面进行改版,修改完后,发现统计图上的circle点的hover事件失效了。我用的画图插件是jQuery的chart.js,比较老的版本了。于是我开始检查chart.js源码,定位到出问题的地方。出问题的代码是这样写的:
$('#'+container_id).delegate('circle','hover',function(e){ if (e.type === 'mouseenter') { var index = $(this).data('index'); var circles = d3.selectAll('#'+container_id+' .data-point-'+index); circles.attr('r',4); var html = ''; circles.each(function(){ var _index = $(this).parent().attr('id').split('_').pop(); var label = _config.line_labels[parseInt(_index)]; var value = d3.select(this).data()[0][1]; html += '<li style="background-color:'+color(_index)+';">'+label+':'+value+'</li>'; }); $('#'+container_id+' .line-chart-tip').html(html).show(); $('#'+container_id+' .line-chart-tip').css('left',(w - $('#'+container_id+' .line-chart-tip').width()) / 2 + 'px'); return false; }else{ var index = $(this).data('index'); var circles = d3.selectAll('#'+container_id+' .data-point-'+index); circles.attr('r',3); $('#'+container_id+' .line-chart-tip').hide(); } });
问题就出现在$(‘#’+container_id).delegate(‘circle’,’hover’,function(e){})这里,新版的页面使用的jQuery版本比较新,是1.10.2的。这个版本的jQuery已经没有hover这种事件了,需要将hover替换成mouseover,替换后就有反映了。但是单单这样修改是不够的,修改完整的代码如下:
$('#'+container_id).delegate('circle','mouseover',function(e){ var index = $(this).data('index'); var circles = d3.selectAll('#'+container_id+' .data-point-'+index); circles.attr('r',4); var html = ''; circles.each(function(){ var _index = $(this).parent().attr('id').split('_').pop(); var label = _config.line_labels[parseInt(_index)]; var value = d3.select(this).data()[0][1]; html += '<li style="background-color:'+color(_index)+';">'+label+':'+value+'</li>'; }); $('#'+container_id+' .line-chart-tip').html(html).show(); $('#'+container_id+' .line-chart-tip').css('left',(w - $('#'+container_id+' .line-chart-tip').width()) / 2 + 'px'); return false; }); $('#'+container_id).delegate('circle','mouseout',function(e){ var index = $(this).data('index'); var circles = d3.selectAll('#'+container_id+' .data-point-'+index); circles.attr('r',3); $('#'+container_id+' .line-chart-tip').hide(); });