D3 v6 以降でイベント リスナーはどのように変更されましたか?

D3 v6 のイベント リスナーについて

D3 では、要素で特定のイベントが発生したときにイベント リスナーを使用してアクションをトリガーします。データ バインドされた要素を操作する場合、イベント処理中に関連するデータにアクセスすることが重要です。ここで、D3 v5 と D3 v6 の間のイベント リスナー パターンの変更が影響します。

D3 v5 以前

D3 バージョン 5 以前では、次のようになります。パターンが使用されました:

selection.on("eventType", function(d, i, nodes) { ... })

ここで、d はイベントをトリガーする要素のデータを表し、i はそのインデックス、nodes は現在の要素のグループです。イベント情報は、d3.event を使用してイベント リスナー内でアクセスできます。

D3 v6 および Beyond

D3 v6 では、パターンが次のように変更されました。

selection.on("eventType", function(event, d) { ... })

これで、イベントは最初のパラメーターとしてリスナーに直接渡され、データは 2 番目のパラメーターになります。その結果、d3.event グローバル変数が削除されました。

データムへのアクセス

D3 v6 でイベントをトリガーしたノードのバインドされたデータムを取得するには、イベント リスナー関数で d パラメーターを使用するだけです。これは、以下の修正されたコードで示されています。

<code class="js">node.on("mouseover", (event, d) => {
    console.log(d.id);
});</code>

その他の注目すべき変更点

• this: d3 は引き続き使用できます。 select(this) は、イベント リスナー関数内の現在の要素にアクセスしますが、アロー関数を使用する場合はスコープが異なる場合があります。
• Positioning: トリガー イベントの x および y 位置を取得します。 SVG に対して、d3.mouse(this) の代わりに d3.pointer(event) を使用します。
• イベント プロパティ: イベントは、d3.event 経由ではなく直接プロパティを公開するようになりました。たとえば、event.x とevent.y は d3.event.x と d3.event.y を置き換えます。

以上がD3 v6 以降でイベント リスナーはどのように変更されましたか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。