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（对于任何术语错误感到抱歉）。

如何在D3中访问“绝对”对象坐标与画布GUI坐标？

1 个答案: