D3 v6 でマウスオーバー時にノード データムを取得する方法

D3 v6 でマウスオーバー時にノード データを取得できません

D3 v6 では、イベント処理メカニズムが以前のバージョンから大幅に変更されました。この記事では、これらの変更について詳しく説明し、マウスオーバー イベント中にノードのデータを取得しようとしたときに発生する一般的な問題の解決策を提供します。

D3 v5 以前のイベント処理

D3 v5 以前、イベント処理パターンは次の形式に従いました。

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

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

D3 v6 でのイベント処理

D3 v6 では、イベント処理パターンが次のように変更されました:

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

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

ノード データムの取得

D3 v6 でノードのデータムを取得するには、新しいイベント処理パターンを使用できます。次の例は、マウスオーバー イベントを処理し、データにアクセスする方法を示しています。

node.on("mouseover", function(event, d) {
  console.log(d.id); // Outputs the id of the node
});

位置およびその他のイベント プロパティ

トリガー イベントの x、y 位置にアクセスするには、d3 を使用します。 d3.mouse(this) の代わりに pointer(event) を使用します。 x および y プロパティを取得するには、d3.event.x および d3.event.y の代わりに、event.x およびevent.y を使用します。

概要

次のイベント処理における重要な変更点D3 v6 では、最初のパラメーターとしてイベントを渡し、d3.select(this) の代わりにevent.currentTarget を使用します。さらに、位置決めのために d3.pointer(event) が d3.mouse(this) を置き換えます。これらの変更を理解すると、D3 v6 アプリケーションでイベントを効果的に処理できるようになります。

以上がD3 v6 でマウスオーバー時にノード データムを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。