D3 获得鼠标的真实位置

最新推荐文章于 2024-07-02 12:02:11 发布

我只是一个coder

最新推荐文章于 2024-07-02 12:02:11 发布

阅读量1.7k

点赞数 5

分类专栏：杂乱技术

本文链接：https://blog.csdn.net/lhf214111967/article/details/104290554

版权

杂乱技术专栏收录该内容

17 篇文章 1 订阅

订阅专栏

此处说明的是V5版本

//在缩放的事件中将 transform 存储为this
注：(这个变量在缩放和平移的过程中，会更新此变量)
var transform = d3.zoomTransform(ele);
this.transform = transform;

//在获得真实坐标的时候,缩放和偏移的变量进行核算
var translateVar = [0, 0];
if (this.transform) {
    translateVar[0] = this.transform.x;
    translateVar[1] = this.transform.y;
}

var scaleVar = this.transform.k;
if (!scaleVar) {
    scaleVar = 1;
}
var coordinates = d3.mouse(this);
var x = (coordinates[0] - translateVar[0]) / scaleVar;
var y = (coordinates[1] - translateVar[1]) / scaleVar;

此时x,y 为真实坐标

研究了一下午。如果帮助到了你，请点个赞~