D3 获得鼠标的真实位置

此处说明的是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 为真实坐标

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