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

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

我需要添加新元素onClick-效果很好，但是如果容器元素被放大/缩小，则单击坐标当然是错误的。

应该有定义明确的方法来执行此操作，但是我找不到d3库版本4的示例。将不胜感激。

问题插图:
https://bl.ocks.org/bfunc/e8c5649f1a3233b4141b36f6ffdff79c

编辑:

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

Gerardo Furtado提供的解决方案

最佳答案

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

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;