【 D3.js 高级系列 — 9.0 】 交互式提示框
一般来说,图表中不宜存在过多文字。但是,有时需要一些文字来描述某些图形元素。那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字。这是一种简单、普遍的交互式,几乎适用于所有图表。通过可给提示框定制外观,能给用户带来很好的体验。
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 - 数据可视化专题站 和 CSDN个人博客
- 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
【 D3.js 高级系列 — 9.0 】 交互式提示框的更多相关文章
- 【 D3.js 高级系列 — 1.0 】 文本的换行
在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...
- 【 D3.js 高级系列 — 4.0 】 矩阵树图
矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. ...
- 【 D3.js 高级系列 — 6.0 】 值域和颜色
在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...
- 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图
机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...
- 【 D3.js 高级系列 — 10.0 】 思维导图
思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...
- 【 D3.js 高级系列 — 8.0 】 标线
有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么 标线,是指地图上需要两个坐标以上才能表示 ...
- 【 D3.js 高级系列 — 7.0 】 标注地点
有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...
- 【 D3.js 高级系列 — 5.0 】 颜色
颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加 ...
- 【 D3.js 高级系列 — 3.0 】 堆栈图
堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...
随机推荐
- NS记录
NS(Name Server)记录是域名服务器记录,用来指定该域名由哪个DNS服务器来进行解析. 1名词简介 您注册域名时,总有默认的DNS服务器,每个注册的域名都是由一个DNS域名服务器来进行解析的 ...
- c++中new和delete的使用方法
c++中new和delete的使用方法 new和delete运算符用于动态分配和撤销内存的运算符 new用法: 1. 开辟单变量地址空间 1)new int; //开辟一个存放数组的存储空间 ...
- linux源代码阅读笔记 fork和execve的区别
1. man exec就可以知到: The exec() family of functions replaces the current process image with a new proce ...
- CentOS(RHEL) 操作备忘
1.安装中文语言包及切换 yum groupinstall chinese-support vi /etc/sysconfig/i18n change en_US to zh_CN 2.用户自动登录 ...
- 【面试题001-补充】C++ MyString类的封装
[面试题001-补充]C++ MyString类的封装 一,C++ MyString类的封装 String.h: 123456789101112131415161718192021222324252 ...
- CF 295A Greg and Array (两次建树,区间更新,单点查询)
#include <iostream> #include <stdio.h> #include <string.h> #include <algorithm& ...
- Javascript 电子时钟源码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- C#实现身份证号码验证的方法
本文实例讲述了C#实现身份证号码验证的方法.分享给大家供大家参考.具体实现方法如下: 随着现在互联网的发展,越来越多的注册用户的地方都用到了身份证,那么对于输入的身份证如何验证呢?看下面的代码,其实很 ...
- lintcode:哈希函数
题目: 哈希函数 在数据结构中,哈希函数是用来将一个字符串(或任何其他类型)转化为小于哈希表大小且大于等于零的整数.一个好的哈希函数可以尽可能少地产生冲突.一种广泛使用的哈希函数算法是使用数值33,假 ...
- mysql23个知识点
1.它是一种解释语言:写一句执行一句,不需要整体编译执行. 2.1.没有“ ”,字符串使用‘ '包含 3.一个表只有一个主键,但是一个主键可以是由多个字段组成的 组合键 4.实体完整性:实体就是指一条 ...