我正在使用 d3.js 缩放功能来放大 svg 中的图像。我正在使用 mask 来显示下面的底层图像。如果我不缩放蒙版和鼠标光标坐标完美匹配。但是,当我开始缩放时,鼠标坐标并未转换为缩放级别,因此 map 显示不再与光标对齐。
这是我目前使用的...我假设缩放时需要某种坐标转换?
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');
});
最佳答案
(我知道这是一个迟到的答案,但我遇到了同样的问题,我想我会为以后看到这个的人分享我是如何修复它的)
修复:使用coordinates=mouse(lightMap.node())
/darkMap.node()
而不是 mouse(this)
.或者,可能更正确,调用 svg
上的缩放行为并继续使用 mouse(this)
.
说明:您在 svg
上调用了 mousemove 函数, 所以 mouse(this)
获取 svg
内的坐标元素。但是,您没有将缩放行为应用于 svg
,所以你得到错误的坐标。调用mouse(_)
在缩放的元素上。
关于javascript - d3.js 缩放鼠标坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29784294/