D3添加title提示信息时出现滚动条时,显示错位的问题
来源:互联网 发布:sql是一种什么语言 编辑:程序博客网 时间:2024/05/22 18:24
使用D3绘制svg的时候碰到一个问题,当鼠标移动到柱状图上显示该柱状图的提示信息,当不出现纵向滚动条的时候会显示的非常友好,如下所示:
但是当你的布局内容比较多的情况下会出现纵向滚动条,这是在所难免的了,然而出现滚动条的时候,滚轮向下滚动并且鼠标焦点已经在svg外面了,你再慢慢往上滚动的时候,这时滚动条没有滚动到顶部,就会出现提示信息与鼠标的坐标点有出入,类似于:
我就很奇怪为啥会出现这样的情况,于是好奇就打印了一下坐标点,结果在滚动条在顶部的时候打印的坐标点是跟滚动条不在顶部时的坐标点室有出入的,这个出入,讲到这里你们就知道了什么原因了,原来不管通过js,jquery还是D3自带的事件捕捉鼠标的坐标点都是从顶部开始的,当出现滚动条的时候,并且滚动条不在顶部时,获取的鼠标X,Y坐标点是要加上滚动条距离顶部的距离的:
滚动条距离top为0的坐标点
滚动条距离top有一段距离的坐标点
所以我们只要在出现滚动条的获取当前鼠标的坐标点的时候减去滚动条距离top的距离,提示信息的距离就可以跟鼠标的位置一致了,于是就定义了一个方法,就是去获取滚动条距离top的距离:
将获取鼠标坐标点的方法修改一下:
阅读全文
0 0
- D3添加title提示信息时出现滚动条时,显示错位的问题
- webIM项目中,有新消息时,滚动窗体的title提示有信息消息
- 添加tabs出现两个滚动条问题
- jquery datepicker 在ie7中有滚动条时错位问题
- 在action中,数据添加、修改成功后,向页面显示提示信息,包括可能出现的问题。
- html图片的alt与title:alt:图片加载失败时的提示信息;title:鼠标放上时的提示信息
- 往JScrollPane中添加组件时滚动条不出现的解决方法
- iframe的滚动条问题:显示/隐藏滚动条
- iframe的滚动条问题:显示/隐藏滚动条
- iframe的滚动条问题:显示/隐藏滚动条
- IE9 table显示问题,td出现错位的解决方法
- QGraphicsView大于QGraphicsScene时出现滚动条时,改变scene的显示位置
- QGraphicsView大于QGraphicsScene时出现滚动条时,改变scene的显示位置
- 在地图上画正六边形时出现的问题(d3)
- 单条信息滚动显示
- 漂亮的title提示信息
- TWebBrowser滚动条的显示问题探讨。
- DataGrid的滚动条不显示问题
- 基础背包01(HDU2606,HUD3591)
- java 用poi 生成表格合并单元格放法
- Intent的那些事儿
- 【jzoj5073】【GDOI2017第三轮模拟day1】【影魔】【数据结构】
- LeetCode 43 Multiply Strings
- D3添加title提示信息时出现滚动条时,显示错位的问题
- 使用RecycleView加载不同的布局(类似淘宝京东购物车+推荐商品列表)
- LeetCode -- 120. Triangle
- ACM题集以及各种总结大全!
- ObjectARX编程(四) --------符号表简述
- 跟着阮一峰老师学习React.js
- uC/OS-III之时钟节拍列表
- 《Android群英传》笔记5——自定义View
- 单链表的C++实现