D3 v4 - 检测缩放区域中的点击坐标

时间:2017-10-07 15:51:26

标签: javascript d3.js

我将构建某种ui来管理d3版本4的块之间的依赖关系。

我需要在onClick上添加新元素 - 它工作正常,但是如果容器元素被放大/缩小 - 当然,click的坐标是错误的。

应该有明确的方法来做到这一点,但我找不到d3库的第4版的例子。将不胜感激任何帮助。

问题说明: https://bl.ocks.org/bfunc/e8c5649f1a3233b4141b36f6ffdff79c

编辑:

解决方案: https://bl.ocks.org/anonymous/3e3e5333ff24a2c9972bc9320dc6f712/f4dcd09a07b5eafdc78efa0cf45948021e003739

Gerardo Furtado

提供的解决方案

1 个答案:

答案 0 :(得分:3)

为了跟踪所有缩放和平移,您可以创建一个对象......

let zoomTrans = {x:0, y:0, scale:1};

...您在缩放功能中更新:

zoomTrans.x = d3.event.transform.x;
zoomTrans.y = d3.event.transform.y;
zoomTrans.scale = d3.event.transform.k;

然后,在点击功能中,使用此数学:

let x = (d3.event.x - zoomTrans.x)/zoomTrans.scale;
let y = (d3.event.y - zoomTrans.y)/zoomTrans.scale;

以下是更新的bl.ocks:https://bl.ocks.org/anonymous/3e3e5333ff24a2c9972bc9320dc6f712/f4dcd09a07b5eafdc78efa0cf45948021e003739