如何在 D3 中访问"absolute"对象坐标与画布 GUI 坐标？

Question

我是JS/D3的初学者。

我在某些2D空间中有一系列具有"绝对"坐标的对象。坐标就像[(2000,3000),(3500,4000),...]等。从SVG容器的GUI（即，从浏览器窗口的左上方）也有"相对"坐标。

我不明白如何获得一种类型的坐标与另一种坐标。

例如，以下内容为我提供了SVG GUI的"相对"坐标，这很有意义，因为我在SVG本身上称其为"相对"。

var svg = d3.select("#chart").append("svg")
    .on("touchmove mousemove", moved)
function moved() {
    var point = d3.mouse(this);
    $("#lx").text(point[0].toFixed(0));
    $("#ly").text(point[1].toFixed(0));
    }

但是，以下代码为我的对象所绘制了空间的"绝对"坐标。它在我的节点上的拖动函数中调用相同的 d3.mouse(this)：

var node = svg.selectAll('g') 
    .data(data) 
    .enter()
    .append("g")
    .call(d3.drag()
        .subject(function() { 
        var t = d3.select(this);
        return {x: t.attr("x"), y: t.attr("y")};
    })
    .on("drag", dragged))
    .attr("class", "node");
function dragged(d) {   
    coordinates = d3.mouse(this);
}

以某种方式，这给了我我通常想要的"绝对"坐标，我不明白为什么。

如何通过在SVG对象上调用鼠标事件来获得这些"绝对"坐标，而不是GUI坐标？

另外，有人会向我指出解释发生了什么的文学吗？

Answer 1

我发现coordinates = d3.mouse(svg.node())给了我我想要的代码。请注意.node()，这是D3需要到适当的对象（对不起任何术语错误）。