将鼠标悬停在图例dc.js上时,在barChart上添加工具提示

时间:2016-07-01 20:14:23

标签: d3.js dc.js

当我将鼠标悬停在图例上时,我正在学习如何使用dc.js在barChart之上添加计数。

经过一番研究,我发现我必须使用.on('renderlet')

var legends = chart.selectAll("g.dc-legend .dc-legend-item");
    		
    		legends
    			.on("mouseover.foo", function(d){
	    			var layername = d.name;
	    			var val = '';
	    			if (layername == 'full scat')
	    				val = 's_full';
	    			else if (layername == 'partial scat')
	    				val = 's_partial';
	    			else if (layername == 'empty scat')
	    				val = 's_empty';
	    			else if (layername == 'partial citrate')
	    				val = 'c_partial';
	    			else if (layername == 'empty citrate')
	    				val = 'c_empty';
	    			else if (layername == 'full citrate')
	    				val = 'c_full';
	    			else if (layername == 'N')
	    				val = 'n_pax';
	    			else if (layername == 'Y')
	    				val = 'y_pax';
	    			
	    			var div = "";
	    			if (/scat/.test(layername))
	    				div = 'g.sub._0  .stack._2 .barLabel';
	    			else if (/citrate/.test(layername))
	    				div = 'g.sub._1  .stack._2 .barLabel';
	    			else if (/N/.test(layername) ||/Y/.test(layername))
	    				div = 'g.sub._2  .stack._1 .barLabel';
	    			
	    			var text = chart.selectAll(div);

	    			text.text(function(d){
	    				return d.data.value[val];
	    			})
	    			text.attr("visibility", "visible");
    		});
    		legends
    			.on("mouseout.foo", function(d){
    				chart.selectAll('.barLabel').attr("visibility", "hidden");
    			});

我第一次鼠标悬停确定,但在我过滤数据一次后,将鼠标悬停在上面。伯爵不会出现。

这是bl.ock

0 个答案:

没有答案