Microsoft Edgeでマウスイベントをシミュレートするd3

Question

私はテストを書いていて、 "mousemove"イベントをシミュレートしようとしています。

var e = new MouseEvent('mousemove',{ 
    "clientX": 250, 
    "clientY": 100, 
}); 

myElem.dispatchEvent(e); 

しかし、それはエッジでは動作しません：クロム、Firefoxの、サファリ、およびIE 10 & 11で働く私が使用している方法があります。 "mousemove"イベントが発生し、リスナーに捕まえられますが、位置が正しくありません。提供された座標を使用する代わりに、ウィンドウの起点0,0を使用するように見えます。

私の実際のコードはEdgeで正しく実行されるため、イベントをシミュレートするだけで問題に見えます。しかし、これはd3のチャートのためのものであり、d3.mouseでマウスの位置を読み取っているため、d3.mouseとマウスイベントのやりとりでEdgeに異なるものがあることを除外することはできません。

私が試みた他のアプローチは、CustomEventを使用してPointerEventを使用することを含みますが、両方ともeventListenerをトリガーするように見えますが、d3.mouseによっても読み込みできないようです。 UPDATE

は、もともと私は指定された座標が完全に無視されたと思いました。これはそうではありません。現実はさらに奇妙です。不条理に高い数字を使用すると、私はそれを私の要素に登録することができます。しかし、実数はスクリーンから離れていると考えられます。

left: 100, 
top: 10, 
width: 500, 
height: 300 

と私は、次のような座標を使用します：

例えば、私の要素getBoundingClientRectは私に与えた場合の要素の上に私のカーソルを置く必要があります

var e = new MouseEvent('mousemove',{ 
    "clientX": 350, 
    "clientY": 150, 
}); 

、エッジが私のカーソルを考えているようです画面から離れています。代わりに、次のような数字を入力した場合：

var e = new MouseEvent('mousemove',{ 
    "clientX": 100000, 
    "clientY": 50000, 
}); 

Edgeはこれを私の要素以上とみなします。

Answer 1

d3.mouseメソッドは、マウスイベントのx、y座標をグラフコンテナに対して返します。マウスイベントをシミュレートするために使用しているclientXおよびclientYの値は、現在のウィンドウに対するマウスイベントのx、y座標を提供します。したがって、座標セットは同じではありません。手動介しd3.mouse方法と同じ座標値を計算することができる：rect.leftとrect.topグラフオブジェクトの外接矩形の座標で

d3MouseX = clientX - rect.left 
d3MouseY = clientY - rect.top 

。これらの座標はe.target.getBoundingClientRect()メソッドで取得できます。