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

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 】 交互式提示框的更多相关文章

  1. 【 D3.js 高级系列 — 1.0 】 文本的换行

    在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...

  2. 【 D3.js 高级系列 — 4.0 】 矩阵树图

    矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. ...

  3. 【 D3.js 高级系列 — 6.0 】 值域和颜色

    在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...

  4. 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

    机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...

  5. 【 D3.js 高级系列 — 10.0 】 思维导图

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  6. 【 D3.js 高级系列 — 8.0 】 标线

    有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么 标线,是指地图上需要两个坐标以上才能表示 ...

  7. 【 D3.js 高级系列 — 7.0 】 标注地点

    有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...

  8. 【 D3.js 高级系列 — 5.0 】 颜色

    颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加 ...

  9. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

随机推荐

  1. gcd，lcm，ext_gcd，inv

    Least Common Multiple http://acm.hdu.edu.cn/showproblem.php?pid=1019 #include<cstdio> int gcd( ...

  2. 检测php网站是否已经被攻破的方法

    0x01 查看访问日志 看是否有文件上传操作(POST方法), IPREMOVED - - [01/Mar/2013:06:16:48 -0600] "POST/uploads/monthl ...

  3. Unity3D与iOS的交互设计<ViewController 的跳转>

    原地址:http://www.aichengxu.com/article/%CF%B5%CD%B3%D3%C5%BB%AF/28797_12.html Unity3D与iOS的交互设计<View ...

  4. What is XMLHTTP? How to use security zones in Internet Explorer

    Types of Security Zones Internet Zone This zone contains Web sites that are not on your computer or ...

  5. Eclipse Error: Unable to set localhost. This prevents creation of a GUID.

    Symptoms The following error appears in the atlassian-confluence.log: 2011-03-16 18:20:03,021 ERROR ...

  6. HDU3068 最长回文 Manacher算法

    Manacher算法是O(n)求最长回文子串的算法,其原理很多别的博客都有介绍,代码用的是clj模板里的,写的确实是异常的简洁,现在的我只能理解个大概,下面这个网址的介绍比较接近于这个模板,以后再好好 ...

  7. Android Drawable 关于selector中state_pressed="true"的位置顺序

    界面中有一个按钮使用这样的样式: <?xml version="1.0" encoding="utf-8"?> <selector xmlns ...

  8. lintcode：strStr 字符串查找

    题目: 字符串查找 字符串查找(又称查找子字符串),是字符串操作中一个很有用的函数.你的任务是实现这个函数. 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source ...

  9. lintcode ：Remove Duplicates from Sorted List 删除排序链表中的重复元素

    题目: 删除排序链表中的重复元素 给定一个排序链表,删除所有重复的元素每个元素只留下一个.   您在真实的面试中是否遇到过这个题? 样例 给出1->1->2->null,返回 1-& ...

  10. [转]C++四种cast操作符

    http://blog.csdn.net/starryheavens/article/details/4617637 C 风格(C-style)强制转型如下: (T) expression 或 T(e ...