D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

我使用D3库来创建绘图应用程序。

我需要在用户单击的坐标上绘制对象（为了简单起见）。问题是当用户使用平移&缩放和移动视口。
然后对象是错误的位置的地方（我想问题是事件坐标是相对于svg元素而不是g，所以他们是计算没有适当的转换）。

< pre> $（'svg'）。on（'click'，function（event）{
d3.select（'＃content-layer'）。append ）
.attr（'r'，10）
.attr（'cx'，event.offsetX）
.attr（'cy'，event.offsetY）
.attr （'stroke'，'black'）
.attr（'fill'，'white'）;
}）;

var zoomBehavior = d3.behavior.zoom（）
.scaleExtent（[1，10]）
.on（'zoom'，（）=> {
var translate =translate（+ d3.event.translate +）;
var scale =scale（+ d3.event.scale +）;
d3.select '＃content-layer'）。attr（transform，translate + scale）;
}）;

d3.select（'svg'）。call（zoomBehavior）;

我试图添加点击回调到g元素，但它不工作

这里是jsfiddle：
https://jsfiddle.net/klinki/53ftaw7r/

解决方案

基本上你需要

所以我创建了一个变量：

var translateVar = [0,0];

当您平移更新此变量时：

translateVar [0] = d3.event.translate [0];
translateVar [1] = d3.event.translate [1];

并将其添加到圈子的坐标：

.attr（'cx'，mouseCoords [0] - translateVar [0]）
.attr（'cy'，mouseCoords [1] - translateVar [1] ）

更新小提琴：https://jsfiddle.net/thatoneguy/53ftaw7r/2/