D3 v6 のマウスオーバー イベント中にノード データを取得するにはどうすればよいですか?

D3 v6 で、マウスオーバー イベント中にノード データムを取得する方法

D3 v6 以降では、選択を使用してノードのバインドされたデータムを取得します。 on() は以前のバージョンとは異なります。マウス イベント データを受信する代わりに、データがイベント リスナーに渡される 2 番目のパラメーターになります。

D3v5 およびそれ以前

以前は、D3 のイベント リスナーは次のパターンに従いました。 :

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

ここで:

• d はイベントトリガー要素のデータです
• i はそのインデックスです
• ノードは現在のグループです選択した要素の数

イベント関連データには、d3.event を使用してアクセスできます。

D3v6

D3v6 では、パターンが変更されましたto:

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

今度は、イベント オブジェクトが最初のパラメーターとして直接渡され、データが 2 番目のパラメーターになります。その結果、d3.event は非推奨になりました。

データムへのアクセス

マウスオーバー ターゲットのデータムを取得するには:

node.on("mouseover", (event, d) => { 
    console.log(d); 
});

イベント位置の決定

D3v5 では、d3.mouse(this) を使用してイベントの X、Y 位置を取得できます。 D3v6 では、次を使用します。

d3.pointer(event);

例

次の例は、マウスオーバー イベント中にデータとイベントの位置を取得する方法を示しています。

const data = [
    {
        "id": "Myriel",
        "group": 1
    }, 
    {
        "id": "Napoleon",
        "group": 1
    }
];

const nodes = svg.append("g")
    .selectAll("circle")
    .data(data)
    .join("circle")
    ...;

node.on("mouseover", (event, d) => {
    console.log(d.id); 
    console.log(d3.pointer(event));
});

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