平移和縮放后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/