[英]D3 v4 - Detect click coordinates in zoomed area
I am going to build some kind of ui to manage dependencies between blocks with d3 version 4. 我将构建某种ui来管理d3版本4的块之间的依赖关系。
I need to add new element onClick - it works fine, but if container element is zoomed in/out - coordinates of click are wrong, of course. 我需要在onClick上添加新元素 - 它工作正常,但是如果容器元素被放大/缩小 - 当然,click的坐标是错误的。
There should be well defined approach to do that, but I cannot find example for version 4 of d3 library. 应该有明确的方法来做到这一点,但我找不到d3库的第4版的例子。 Will appreciate any help.
将不胜感激任何帮助。
Illustration of problem: https://bl.ocks.org/bfunc/e8c5649f1a3233b4141b36f6ffdff79c 问题的插图: https : //bl.ocks.org/bfunc/e8c5649f1a3233b4141b36f6ffdff79c
Edited: 编辑:
Solution: https://bl.ocks.org/anonymous/3e3e5333ff24a2c9972bc9320dc6f712/f4dcd09a07b5eafdc78efa0cf45948021e003739 解决方案: https : //bl.ocks.org/anonymous/3e3e5333ff24a2c9972bc9320dc6f712/f4dcd09a07b5eafdc78efa0cf45948021e003739
Solution provided by Gerardo Furtado 解决方案由Gerardo Furtado提供
In order to track all the zoom and panning, you can create an object... 为了跟踪所有缩放和平移,您可以创建一个对象......
let zoomTrans = {x:0, y:0, scale:1};
... which you update in the zoom function: ...你在缩放功能中更新:
zoomTrans.x = d3.event.transform.x;
zoomTrans.y = d3.event.transform.y;
zoomTrans.scale = d3.event.transform.k;
Then, in the click function, use this math: 然后,在click函数中,使用以下数学:
let x = (d3.event.x - zoomTrans.x)/zoomTrans.scale;
let y = (d3.event.y - zoomTrans.y)/zoomTrans.scale;
Here is the updated bl.ocks: https://bl.ocks.org/anonymous/3e3e5333ff24a2c9972bc9320dc6f712/f4dcd09a07b5eafdc78efa0cf45948021e003739 这是更新的bl.ocks: https ://bl.ocks.org/anonymous/3e3e5333ff24a2c9972bc9320dc6f712/f4dcd09a07b5eafdc78efa0cf45948021e003739
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.