码迷,mamicode.com
首页 > Web开发 > 详细

【 D3.js 高级系列 — 9.0 】 交互式提示框

时间:2015-06-15 22:09:45      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:d3   提示框   tooltip   div   css   

一般来说,图表中不宜存在过多文字。但是,有时需要一些文字来描述某些图形元素。那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字。这是一种简单、普遍的交互式,几乎适用于所有图表。通过可给提示框定制外观,能给用户带来很好的体验。

技术分享


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

谢谢阅读。

文档信息

【 D3.js 高级系列 — 9.0 】 交互式提示框

标签:d3   提示框   tooltip   div   css   

原文地址:http://blog.csdn.net/lzhlzz/article/details/46508041

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!