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

时间:2013-09-02 10:57:54

标签: javascript d3.js mouse coordinates

我想得到相对于父级的鼠标坐标或除this以外的DOM中的任何其他元素但我一直在

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中的其他元素?

2 个答案:

答案 0 :(得分:41)

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

答案 1 :(得分:4)

您可以使用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");
    });