D3添加title提示信息时出现滚动条时，显示错位的问题

使用D3绘制svg的时候碰到一个问题，当鼠标移动到柱状图上显示该柱状图的提示信息，当不出现纵向滚动条的时候会显示的非常友好，如下所示：

但是当你的布局内容比较多的情况下会出现纵向滚动条，这是在所难免的了，然而出现滚动条的时候，滚轮向下滚动并且鼠标焦点已经在svg外面了，你再慢慢往上滚动的时候，这时滚动条没有滚动到顶部，就会出现提示信息与鼠标的坐标点有出入，类似于：

我就很奇怪为啥会出现这样的情况，于是好奇就打印了一下坐标点，结果在滚动条在顶部的时候打印的坐标点是跟滚动条不在顶部时的坐标点室有出入的，这个出入，讲到这里你们就知道了什么原因了，原来不管通过js，jquery还是D3自带的事件捕捉鼠标的坐标点都是从顶部开始的，当出现滚动条的时候，并且滚动条不在顶部时，获取的鼠标X,Y坐标点是要加上滚动条距离顶部的距离的：

滚动条距离top为0的坐标点

滚动条距离top有一段距离的坐标点

所以我们只要在出现滚动条的获取当前鼠标的坐标点的时候减去滚动条距离top的距离，提示信息的距离就可以跟鼠标的位置一致了，于是就定义了一个方法，就是去获取滚动条距离top的距离：

将获取鼠标坐标点的方法修改一下：