Comment récupérer les données de nœud lors des événements de survol de la souris dans D3 v6 ?

Dans D3 v6, comment acquérir des données de nœud lors d'événements de survol de la souris

Dans D3 v6 et versions ultérieures, récupération des données liées d'un nœud avec sélection. on() diffère des versions précédentes. Au lieu de recevoir les données d'événement de la souris, la donnée devient le deuxième paramètre transmis à l'écouteur d'événement.

D3v5 et versions antérieures

Auparavant, les écouteurs d'événements dans D3 suivaient le modèle :

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

où :

• d est la donnée de l'élément déclencheur de l'événement
• i est son index
• nodes est le groupe actuel des éléments sélectionnés

Les données liées à l'événement sont accessibles à l'aide de d3.event.

D3v6

Avec D3v6, le modèle a changé à :

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

Maintenant, l'objet événement est directement passé en premier paramètre, tandis que la donnée est le deuxième paramètre. d3.event est donc obsolète.

Accès à la donnée

Pour récupérer la donnée de la cible du survol de la souris :

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

Détermination de la position de l'événement

Dans D3v5, vous pouvez utiliser d3.mouse(this) pour obtenir la position x,y de l'événement. Dans D3v6, utilisez :

d3.pointer(event);

Exemple

L'exemple suivant montre l'obtention de la position de la donnée et de l'événement lors d'un événement de survol de la souris :

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));
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!