d3.js缩放鼠标坐标

Question

我正在使用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');        

});

- s_dev

---

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

Answer 1

（我知道这是一个晚回答，但我有同样的问题，并想分享一下我如何解决它，以便未来看到此内容的人）

解决方法：使用coordinates=mouse(lightMap.node()) / darkMap.node()而不是mouse(this)。或者更正确的做法是，在svg上调用缩放行为并继续使用mouse(this)。

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

- RatherBeLunar