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');

}）;

Answer 1

（我知道这是一个迟到的答案，但我遇到了同样的问题，并且认为我分享了如何为未来看到此问题的人修复它）

修复：使用coordinates=mouse(lightMap.node()) / darkMap.node()代替mouse(this)。或者，可能更准确地说，在svg上调用缩放行为并继续使用mouse(this)。

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

d3.js缩放鼠标坐标

1 个答案: