D3ドラッグイベントの動作：DragEvent.xおよびDragEvent.yの値のソース

Question

D3のMike Bostockの例のD3 DragEventオブジェクトの動作を理解できません。

これらは私は理解していない2つの例である： Circle Dragging IDrag + Zoom

これは、私は理解していないコードである：

関数は、（D）{d3.selectを（ドラッグthis））.attr（ "cx"、dx = d3.event.x）.attr（ "cy"、dy = d3.event.y）; }

この例では、d.xとd.yは円の最後の中心を含むデータオブジェクトの一部です。私はこのコードで起こることを期待し何

、それがすべき、私の見解でd3.event.xとd3.event.y

の現在の値にサークルチェンジの属性CXとCYということですユーザーがドラッグを開始したときのマウスの座標です。ユーザーが円の中心を正確にドラッグし始めていない場合は、ユーザーがドラッグを開始した場所に円がジャンプしてから通常のドラッグ動作が発生すると予想されます。

私の問題は、最初のジャンプが起こらず、なぜかわからないということです。

コードが実行されているときにd3.event.xとd3.event.yの値がチェックされていて、これらの値がd.xとd.yの値とまったく同じであっても、ユーザーがサークル内のどこをクリックしても構いません。なぜそうなのか分かりません。

最後に、d.xとd.yからd.mとd.nにオブジェクト内の（そして名前が必要なときはいつでも）名前を変更し、コードが私が期待していたことを始めました。

関数は、（D）{d3.select（本）.ATTR（ "CX"、d.m = d3.event.x）.ATTR（ "CY"、d.n = d3.event.y）ドラッグ。 }

したがって、データオブジェクトのプロパティd.xとd.yのコードの動作は、データオブジェクトにプロパティd.mとd.nがある場合とは異なります。 オブジェクトDragEventが具体的な所有権を持つデータオブジェクトを期待しているようですが、それは私には奇妙に聞こえますが、私はそれを見つけることができません。

誰かがすでに答えを知っている場合、私はD3のソースコードをチェックすることを避けることを期待していました。

Answer 1

奇妙な動作が意図された動作ですが

すべてのDragEventオブジェクトには「件名」があります。サブジェクトは、ドラッグイベントを生成しているSVGシェイプではありませんが、存在する場合は、そのSVGに関連付けられたデータムです。基準オブジェクトは、プロパティxとyを有する場合https://github.com/d3/d3-drag#drag_subject

だから、はい、値がいるDragEventオブジェクトのDX及びDYプロパティに割り当てられる：で利用可能

詳細情報。

我々はdrag.jsファイルで、D3のソースに見ることができるように：

dx = s.x - p[0] || 0; 
    dy = s.y - p[1] || 0;