D3平移和缩放后的点击坐标 [英] D3 click coordinates after pan and zoom

问题描述

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

I'm using D3 library to create drawing application.

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

I need to draw object (circle for simplicity) on the coordinates where user clicked. Problem is when user uses the pan & zoom and moves the viewport. Then object is places on wrong position (I guess the problem is event coordinates are relative to svg element and not g, so they are calculated without proper transformation).

$('svg').on('click', function(event) {
    d3.select('#content-layer').append('circle')
    .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元素，但它不工作

I tried to add on click callback to g element, but it is not working (I guess it doesn't have any size?).

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

Here is jsfiddle: https://jsfiddle.net/klinki/53ftaw7r/

推荐答案

基本上你需要

所以我创建了一个变量：

So I created a variable :

var translateVar = [0,0];

当您平移更新此变量时：

When you pan update this variable :

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

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

And add this to your coordinates of the circle :

.attr('cx', mouseCoords[0] - translateVar[0] )
.attr('cy', mouseCoords[1] - translateVar[1])

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

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

You also need to take care of the scale so do a similar thing :

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/

Final fiddle : https://jsfiddle.net/thatoneguy/53ftaw7r/5/

这篇关于D3平移和缩放后的点击坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！