D3的鼠標坐標相對於父元素

Question

我想獲得鼠標坐標相對於父或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中的其他元素？

Answer 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());
});

Answer 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");
    });