D3 v4 - 檢測縮放區域中的點擊坐標

Question

我將構建某種ui來管理d3版本4的塊之間的依賴關系。

我需要在onClick上添加新元素 - 它工作正常，但是如果容器元素被放大/縮小 - 當然，click的坐標是錯誤的。

應該有明確的方法來做到這一點，但我找不到d3庫的第4版的例子。 將不勝感激任何幫助。

問題的插圖： https ： //bl.ocks.org/bfunc/e8c5649f1a3233b4141b36f6ffdff79c

編輯：

解決方案： https ： //bl.ocks.org/anonymous/3e3e5333ff24a2c9972bc9320dc6f712/f4dcd09a07b5eafdc78efa0cf45948021e003739

解決方案由Gerardo Furtado提供

Answer 1

為了跟蹤所有縮放和平移，您可以創建一個對象......

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;

然后，在click函數中，使用以下數學：

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