【 D3.js 高级系列 — 9.0 】 交互式提示框
来源:互联网 发布:关闭搜狗输入云计算 编辑:程序博客网 时间:2024/05/17 02:41
一般来说,图表中不宜存在过多文字。但是,有时需要一些文字来描述某些图形元素。那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字。这是一种简单、普遍的交互式,几乎适用于所有图表。通过可给提示框定制外观,能给用户带来很好的体验。
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 高级系列 — 2.0 】 捆图
- 【 D3.js 高级系列 — 5.0 】 颜色
- 【 D3.js 高级系列 — 8.0 】 标线
- 【 D3.js 高级系列 】 总结
- 【 D3.js 高级系列 — 1.0 】 文本的换行
- 【 D3.js 高级系列 — 1.1 】 封装文本自动换行
- 【 D3.js 高级系列 — 3.0 】 堆栈图
- 【 D3.js 高级系列 — 4.0 】 矩阵树图
- 【 D3.js 高级系列 — 6.0 】 值域和颜色
- 【 D3.js 高级系列 — 7.0 】 标注地点
- 【 D3.js 高级系列 — 10.0 】 思维导图
- 【 D3.js 高级系列 — 10.0 】 思维导图
- 【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
- 【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变
- D3.js给饼状图添加提示框
- 【 D3.js 进阶系列 — 5.0 】 直方图
- 【 D3.js 入门系列 — 5 】 坐标轴
- 第12章 类和动态内存分配
- 子控件自动换行的父容器
- [转载]Android APK反编译就这么简单 详解(附图)
- android 打包App和签名
- UVa 1638 Pole Arrangement
- 【 D3.js 高级系列 — 9.0 】 交互式提示框
- Android软件开发之Debug调试与LogCat调试详解
- Error与Exception有什么区别
- 安装pip后命令行出错
- hdu 1870 整理下水题
- 链表中倒数第k个结点
- Xcode注释自动生成
- Java中的异常处理机制的简单原理和应用
- 将10个数按照从大到小输出