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

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. 输入一个整数数组，判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则输出Yes,否则输出No。假设输入的数组的任意两个数字都互不相同。

    // ConsoleApplication2.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "stdafx.h ...

  2. 【POJ】【1067】取石子游戏

    博弈论 这个是博弈游戏中的Wythoff博弈: 以下为我的代码: //POJ 1067 #include<cmath> #include<cstdio> #include< ...

  3. [CF]codeforces round#366(div2)滚粗记

    开场心理活动:啊打完这场大概有1700了吧 中途心理活动:啊这个ABC看起来都随便做啊 死亡原因:欸怎么没网了 -75 .. A [题意]Hulk说完一句I hate会说that I love 然后是 ...

  4. Codeforces 402A 402B 402C 402D

    402A 直接暴力 #include <cstdio> #include <cstdlib> #include <cmath> #include <map&g ...

  5. Linux查看机器型号

    dmidecode | grep “Product Name”

  6. lintcode：next permutation下一个排列

    题目 下一个排列 给定一个整数数组来表示排列,找出其之后的一个排列. 样例 给出排列[1,3,2,3],其下一个排列是[1,3,3,2] 给出排列[4,3,2,1],其下一个排列是[1,2,3,4] ...

  7. lintcode 中等题：Evaluate Reverse Polish notation逆波兰表达式求值

    题目 逆波兰表达式求值 在逆波兰表达法中,其有效的运算符号包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰计数表达. 样例 ["2", "1&q ...

  8. JAVA：23种设计模式详解（转）2

    我们接着讨论设计模式,上篇文章我讲完了5种创建型模式,这章开始,我将讲下7种结构型模式:适配器模式.装饰模式.代理模式.外观模式.桥接模式.组合模式.享元模式.其中对象的适配器模式是各种模式的起源,我 ...

  9. 转一个distinct用法，很有帮助

    转一个distinct用法,很有帮助 (2011-12-01 15:18:11) 转载▼ 标签: 杂谈 分类: mysql复制 在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提 ...

  10. Java学习笔记之：Java的变量

    一.介绍 在Java语言中,所有的变量在使用前必须声明.声明变量的基本格式如下: type identifier [ = value][, identifier [= value] ...] ; 格式 ...