平移和缩放后D3点击坐标

Question

我正在使用D3库来创建绘图应用程序.

我需要在用户点击的坐标上绘制对象(简洁的圆圈).问题是当用户使用平移和缩放并移动视口时.然后对象位于错误的位置(我猜问题是事件坐标是相对于svg元素而不是g,因此它们是在没有适当转换的情况下计算的).

$('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元素,但它不起作用(我猜它没有任何大小？).

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

Answer 1

基本上你需要在点击时关注翻译.

所以我创建了一个变量:

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 )

最后的小提琴:https://jsfiddle.net/thatoneguy/53ftaw7r/5/