d3.js 缩放鼠标坐标答案

【问题标题】：d3.js zooming mouse coordinatesd3.js 缩放鼠标坐标
【发布时间】：2015-04-21 22:27:25
【问题描述】：

我正在使用 d3.js 缩放功能来放大 svg 中的图像。我使用蒙版来显示下面的底层图像。如果我不缩放蒙版和鼠标光标坐标完美匹配。但是，当我开始缩放时，鼠标坐标不会转换为缩放级别，因此地图显示不再与光标对齐。

这是我目前使用的...我假设缩放时需要进行某种坐标转换？

  var lightMap = d3.select("#lightMap").call(d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", zoom));
var darkMap = d3.select("#darkMap").call(d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", zoom));


function zoom() {
lightMap.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
darkMap.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");


}
var svg = d3.select("svg");


svg.on('mousemove', function () {

 var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];



    primaryCircle.setAttribute("cy", y + 'px');
    primaryCircle.setAttribute("cx", x + 'px');

});

【问题讨论】：

你有小提琴什么的吗？猜测我会说这是因为您的鼠标缩放发生在一个元素上，但是您正在更新该元素和缩放处理程序中的另一个元素，这将改变鼠标位置。可能值得将元素分组到 g 元素中并将缩放处理程序应用于该元素。如果您可以将您的代码放在某个地方，我们将能够更仔细地查看。

标签： javascript svg d3.js

【解决方案1】：

（我知道这是一个迟到的答案，但我遇到了同样的问题，我想我会分享我如何为未来看到这个问题的人解决这个问题）

修复：使用coordinates=mouse(lightMap.node()) / darkMap.node() 而不是mouse(this)。或者，可能更正确的是，调用svg 上的缩放行为并继续使用mouse(this)。

解释：您在svg 上调用mousemove 函数，所以mouse(this) 获取svg 元素内的坐标。但是，您不会将缩放行为应用于svg，因此您会得到错误的坐标。在缩放的元素上调用 mouse(_)。

【讨论】：