Question

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

我需要在用户点击的坐标上绘制对象（简洁的圆圈）。问题是当用户使用pan＆amp;缩放并移动视口。然后对象位于错误的位置（我猜问题是事件坐标是相对于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/

平移和缩放后D3点击坐标

1 个答案: