d3-tip文本提示框实现步骤+click和mouseout触发动作事件冲突_解决方法

d3-tip介绍

d3-tip是D3可视化工具中的一种，可用于生成自定义文本提示框。如下图所示，当鼠标悬浮在小矩形上方时，会出现提示框。

d3-tip实现步骤

先附上一篇文章，之后进行分析。
使用d3-tip将文本提示框添加到d3柱形图：http://bl.ocks.org/Caged/6476579

1、添加使用的JavaScript函数库

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

2、为柱形图创建tip

var tip = d3.tip()
	//类名可以自己设置；假如另有一个矩阵图，也需要添加d3-tip，则应创建2个tip，类名可分别设置为d3-tip_bar，d3-tip_matrix，方便分别控制。
	.attr('class', 'd3-tip')
	.offset([-10, 0])
	.html(function(d) {
	//d是数据集中的一条数据，它和一个矩形条绑定在一起。
	return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
	})
//其中html属性也可另行单独定义
tip.html(function (d) {
	let html_str = <strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
	return html_str;
})

3、调用tip

var svg = d3.select("body").append("svg");
svg.call(tip);	//调用指定函数一次，传入参数返回svg，相当于手动调用函数

4、确定数据集

可以是自己定义的数组，也可以是下面函数生成的my_data对象

d3.tsv("filename.tsv", type, function(error, my_data){})
//其中type函数内容为
function type(d) {
	d.frequency = +d.frequency;
	return d;
}

5、添加触发动作事件

selection.	
	.data(my_data)	//必须绑定数据集
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)

如果事件程序不仅有tip.show，则需要用function(d,i){}，此时要注意改变this值。
参考链接：https://www.cnblogs.com/sgqwjr/p/10314770.html

6、click和mouseout触发动作事件冲突_解决方法

我在开发中需要为矩形条添加click动作事件，用于改变数据集内容，然后重新绘制图表。
但点击矩形条后移开光标，mouseout事件被执行，d3-tip却不会消失。
找到的解决方法为移开光标时，删除所有的文本提示框；这样处理后不是mouseover而是click矩形条时，可以看到提示框，mouseout时，提示框消失。
代码如下：

selection.	
	.data(my_data)
	.on('mouseover', tip.show)
	.on('mouseout', function(){
		//光标移动时，移除所有的文本提示框
		$("div.d3-tip").remove();
	})
	.on("click", function (d,i) {})

以上。