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

Posted 2020-11-26 smedas

我使用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/

您还需要照顾缩放因此做类似的事情：

  var scaleVar = 1; 
  

在缩放时更新变量：

  scaleVar = d3.event.scale 
  

新坐标：

  .attr（‘cx‘，（mouseCoords [0]  -  translateVar [0]）/ scaleVar）
 .attr cy‘，（mouseCoords [1]  -  translateVar [1]）/ scaleVar）
  

a href =https://jsfiddle.net/thatoneguy/53ftaw7r/5/ =nofollow> https://jsfiddle.net/thatoneguy/53ftaw7r/5/