13

親または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 内の他の要素に対する座標を取得する方法はありますか?

4

2 に答える 2

52

d3.mouseは、d3 選択ではなく、DOM 要素を想定しています。

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

もちろん、本体の選択はさらに簡単です。

d3.mouse(document.body)

@Tomの答えは、ページに対する相対的な位置が必要なため、あなたの場合にも機能しますが、他のコンテナに対する相対的な位置が必要な場合は機能しません。

ユーザーがクリックした場所にポップアップを配置し、それを svg 要素に対して相対的に配置して、ディスプレイの残りの部分と一緒にパンしたいとします。

nodeEnter.on('click', function(d){
  var coordinates = d3.mouse(svg.node());
});
于 2015-06-02T20:45:30.040 に答える
5

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");
    });
于 2013-09-02T11:12:55.933 に答える