一般来说，图表中不宜存在过多文字。但是，有时需要一些文字来描述某些图形元素。那么，可以实现一种交互：当用户鼠标滑到某图形元素时，出现一个提示框，里面写有描述文字。这是一种简单、普遍的交互式，几乎适用于所有图表。通过可给提示框定制外观，能给用户带来很好的体验。
1. 提示框的制作思路
提示框，就是“文字”加“边框”。显示文字，一般来说用 SVG 的<text>，但是，有两个问题：
- 如果字符串过长，<text>元素不能自动换行，虽然可以通过<text>的子元素<tspan>来模拟自动换行的功能，但是很麻烦。
- <text>是SVG的元素。也就是说，<text>是“图形”而非“文字”，它与SVG中的<circle>、<line>、<path>等元素本质上是一样的。那么，当输出SVG图形时，<text>也会作为图形的一部分输出。
因此，SVG的<text>元素不适合制作提示框。
有一种简单的方法：div + css。div是HTML的元素，在样式中设定其定位方法为绝对定位：
.tooltip{
position: absolute;
width: 120;
height: auto;
}
然后，当监听到鼠标事件时，用鼠标的坐标为提示框定位即可，代码形如：
element.on("mouseover",function(d){
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
})
实际应用中，为使提示框美观，还需为div设置更多的样式。
2. 为饼状图添加提示框
以饼状图为例，绘制好饼状图后。
首先，在 <body> 中添加一个 <div> ，透明度设定为 0，即完全透明，div的类设定为 tooltip。
var tooltip = d3.select("body")
.append("div")
.attr("class","tooltip")
.style("opacity",0.0);
然后，定义一个 tooltip 样式，并将其定位方式设置绝对定位，这一步是重点。其他的属性时关于边框外观和文字显示方式的，此处定义一个简单的。
.tooltip{
position: absolute;
width: 120;
height: auto;
font-family: simsun;
font-size: 14px;
text-align: center;
border-style: solid;
border-width: 1px;
background-color: white;
border-radius: 5px;
}
最后，为饼状图的各图形元素定制鼠标事件的监听器，其中包括：鼠标放到到图形上时（mouseover）、鼠标在图形上移动时（mousemove），鼠标移出时（mouseout）。
arcs.on("mouseover",function(d){
/*
鼠标移入时，
（1）通过 selection.html() 来更改提示框的文字
（2）通过更改样式 left 和 top 来设定提示框的位置
（3）设定提示框的透明度为1.0（完全不透明）
*/
tooltip.html(d.data[0] + "的出货量为" + "<br />" +
d.data[1] + " 百万台")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 20) + "px")
.style("opacity",1.0);
})
.on("mousemove",function(d){
/* 鼠标移动时，更改样式 left 和 top 来改变提示框的位置 */
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 20) + "px");
})
.on("mouseout",function(d){
/* 鼠标移出时，将透明度设定为0.0（完全透明）*/
tooltip.style("opacity",0.0);
})
d3.event.pageX 和 d3.event.pageY 是当前鼠标相对于浏览器页面的坐标，而对于处于绝对定位状态的 <div> 元素来说，其样式 left 和 top 也是相对于浏览器页面来说的。赋值的时候，令 top 的值为 d3.event.pageY + 20，使提示框稍微显示在鼠标位置的下方，这么做能够防止鼠标在提示框上移动导致不触发事件的问题。
3. 结果
结果如下图所示，当鼠标移动到“联想”上时，出现了提示框。
源代码请单击以下链接，邮件查看源代码：
http://www.ourd3js.com/demo/G-9.0/tooltip.html
谢谢阅读。
文档信息
- 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
- 发表日期：2015 年 6 月 15 日
- 更多内容：OUR D3.JS - 数据可视化专题站 和 ****个人博客
- 备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢