一般来说,图表中不宜存在过多文字。但是,有时需要一些文字来描述某些图形元素。那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字。这是一种简单、普遍的交互式,几乎适用于所有图表。通过可给提示框定制外观,能给用户带来很好的体验。
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. 结果
结果如下图所示,当鼠标移动到“联想”上时,出现了提示框。
width="400" height="400" src="http://www.ourd3js.com/demo/G-9.0/tooltip.html" marginwidth="0" marginheight="0" scrolling="no">源代码请单击以下链接,邮件查看源代码:
http://www.ourd3js.com/demo/G-9.0/tooltip.html
谢谢阅读。
转载链接:https://blog.csdn.net/lzhlzz/article/details/46508041?ops_request_misc=&request_id=&biz_id=102&utm_term=tooltip.html(d)&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-2-46508041.first_rank_v2_pc_rank_v29