D3 v6 でマウスオーバー時にノードデータにアクセスするにはどうすればよいですか?

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

問題:

D3 v6 では、selection.on() を使用してマウスオーバー イベント リスナーをノードに追加すると、ノードのデータの代わりにイベント データが返されます。データはどのように取得できますか?

答え:

D3v5 以前:

D3 v5 以前では、イベント リスナーを定義するために次のパターンが使用されました:

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

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

D3v6:

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

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

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

d3.select(this) の使用

イベント リスナー関数では、引き続き d3.select(this) を使用して選択できます。 D3 v6 でもトリガーとなる要素です。ただし、アロー関数を使用する場合、スコープは異なります。

位置:

以前に取得したイベントの X、Y 位置を取得します。 d3.mouse(this)、d3.pointer(event) を使用できるようになりました。 x および y プロパティに直接アクセスするには、d3.event.x および d3.event.y の代わりに、event.x およびevent.y を使用します。

例:

次の例は、D3 v6 のイベント リスナー関数にイベントとデータを渡す方法を示しています:

const svg = d3
  .select("body")
  .append("svg");

svg
  .selectAll("rect")
  .data([1, 2, 3])
  .enter()
  .append("rect")
  .attr("width", 30)
  .attr("height", 30)
  .attr("x", function (d) {
    return d * 50;
  })
  .on("click", function (event, d) {
    console.log(d);
    console.log(d3.pointer(event));
  });

以上がD3 v6 でマウスオーバー時にノードデータにアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。