イベントの処理

インタラクションのために、選択ではイベントのリスニングとディスパッチが可能です。

selection.on(typenames, listener, options)

ソース · 指定されたイベントtypenamesに対して、選択された各要素にlistenerを追加または削除します。

d3.selectAll("p").on("click", (event) => console.log(event))

typenamesは、click、mouseover、またはsubmitなどの文字列のイベントタイプです。ブラウザでサポートされているDOMイベントタイプはどれでも使用できます。タイプには、オプションでピリオド（.）と名前を続けることができます。オプションの名前を使用すると、click.fooやclick.barのように、同じタイプのイベントを受信するように複数のコールバックを登録できます。複数のtypenameを指定するには、input changeやclick.foo click.barのように、スペースでtypenameを区切ります。

選択された要素で指定されたイベントがディスパッチされると、指定されたlistenerが要素に対して評価され、現在のイベント（event）と現在のデータ（d）が渡され、thisは現在のDOM要素（event.currentTarget）として渡されます。リスナーは常に、要素の最新のデータを参照します。注：event.pageXとevent.pageYを直接使用できますが、d3.pointerを使用してイベント位置をイベントを受信した要素のローカル座標系に変換すると便利なことがよくあります。

選択された要素で同じtypenameに対して以前にイベントリスナーが登録されていた場合、古いリスナーは削除されてから、新しいリスナーが追加されます。リスナーを削除するには、listenerとしてnullを渡します。指定された名前のすべてのリスナーを削除するには、listenerとしてnullを渡し、typenameとして.fooを渡します（fooは名前）。名前のないすべてのリスナーを削除するには、typenameとして.を指定します。

オプションのoptionsオブジェクトは、イベントリスナーに関する特性（キャプチャリングであるかパッシブであるかなど）を指定できます。 element.addEventListenerを参照してください。

listenerが指定されていない場合、最初に選択された（nullでない）要素に、指定されたイベントtypenameに対して現在割り当てられているリスナー（存在する場合）を返します。複数のtypenameが指定されている場合は、最初に一致するリスナーが返されます。

selection.dispatch(type, parameters)

ソース · 指定されたtypeのカスタムイベントを、選択された各要素に順にディスパッチします。

d3.select("p").dispatch("click")

オプションのparametersオブジェクトを指定して、イベントの追加プロパティを設定できます。次のフィールドを含めることができます。

• bubbles - trueの場合、イベントは逆ツリー順で祖先にディスパッチされます。
• cancelable - trueの場合、event.preventDefaultが許可されます。
• detail - イベントに関連付けられたカスタムデータ。

parametersが関数の場合、選択された各要素に対して、現在のデータ（d）、現在のインデックス（i）、および現在のグループ（nodes）が渡され、thisが現在のDOM要素（nodes[i]）として評価されます。現在の要素のパラメータを返す必要があります。

pointer(event, target)

ソース · 指定されたtargetに対する指定されたeventの座標を表す2要素の数値配列[x, y]を返します。

const [x, y] = d3.pointer(event);

eventは、MouseEvent、PointerEvent、Touch、またはevent.sourceEventとしてUIEventを保持するカスタムイベントにすることができます。

targetが指定されていない場合は、デフォルトでソースイベントのcurrentTargetプロパティ（利用可能な場合）になります。targetがSVG要素の場合、イベントの座標は、逆のスクリーン座標変換行列を使用して変換されます。targetがHTML要素の場合、イベントの座標は、targetの境界クライアント矩形の左上隅に対して相対的に変換されます。（そのため、座標系はクライアント座標に対してのみ変換できます。GeometryUtilsも参照してください。）それ以外の場合は、[event.pageX, event.pageY]が返されます。

pointers(event, target)

ソース · 指定されたtargetに対する指定されたeventのポインター位置の座標の配列[[x0, y0], [x1, y1]…]を返します。

const points = d3.pointers(event);

タッチイベントの場合、返される位置の配列はevent.touches配列に対応します。他のイベントの場合は、単一要素の配列を返します。

targetが指定されていない場合、デフォルトでソースイベントのcurrentTargetプロパティ（存在する場合）になります。