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/

- Klinki

---

这在我看来好像正如预期的一样运作 - 你能再详细解释一下吗？你所说的“问题”是指用户使用平移缩放功能并移动视口后，物体位置发生错误？ - StudioTime

点击视口以插入一个圆。然后拖动视口（圆应该移动），然后再次单击。新的圆不会放置在用户单击的坐标上。 - Klinki

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/

- thatOneGuy

---

谢谢！看起来不错 :) - Klinki