D3相对于父元素的鼠标坐标答案

【问题标题】：D3's mouse coordinates relative to parent elementD3相对于父元素的鼠标坐标
【发布时间】：2013-09-02 10:57:54
【问题描述】：

我想获取相对于父元素或 DOM 中除 this 之外的任何其他元素的鼠标坐标，但我一直在获取

Uncaught TypeError: Object [object Array] has no method 'getBoundingClientRect' d3.v3.min.js:1
H d3.v3.min.js:1
vo.mouse d3.v3.min.js:3
(anonymous function) index.html:291
(anonymous function)

我的代码：

.on("mouseup", function(d){
    var th = d3.select( this );

    var coordinates = [0, 0];
    coordinates = d3.mouse( d3.select("body") );
    console.log( coordinates[1] );
    console.log( window );
    //th.attr("cy", d3.mouse),
    //d.newY = th.attr("cy");
    console.log(d);
});

据我所知，我只能获取相对于我已附加 .on("mouseup", ...) 事件侦听器的元素的鼠标坐标。

有没有办法获得相对于 DOM 中其他元素的坐标？

【问题讨论】：

你尝试过使用 jQuery 的offset 方法吗？
不，我看到我必须使用 DOM 占位符，例如 this 或 this.parentNode 而不是 jQuery 或 D3.js 的对象。

标签： javascript d3.js mouse coordinates

【解决方案1】：

d3.mouse 需要一个 DOM 元素，而不是 d3 选择。

d3.mouse(d3.select('body').node())

当然选择身体会更容易：

d3.mouse(document.body)

@Tom 的回答也适用于你的情况，因为你想要相对于页面的位置，但如果你想要相对于其他容器的位置，它就不起作用。

假设您想在用户单击的位置放置一个弹出窗口，并且您希望相对于 svg 元素定位它，以便它与您的显示的其余部分一起平移。

nodeEnter.on('click', function(d){
  var coordinates = d3.mouse(svg.node());
});

【讨论】：

这是正确答案 - 让我们假装它被选中。

【解决方案2】：

您可以使用 d3.event.pageX 和 d3.event.pageY。我使用这个的一个例子：

.on("mouseover", function(d){
        hover.transition().duration(200).style("opacity", .9);
        hover.html(new Date(d.creationDate)+": "+d.reactionTime).style("left", d3.event.pageX+"px").style("top", (d3.event.pageY - 28)+"px");
    });

【讨论】：

只是好奇为什么- 28 ？
@Angular_10 只是另一个神奇的数字 :) pageX 和 pageY 不会给你一个相对于容器的结果。