Comment les écouteurs d'événements ont-ils changé dans D3 v6 et au-delà ?

Comprendre les écouteurs d'événements dans D3 v6

Dans D3, les écouteurs d'événements sont utilisés pour déclencher des actions lorsque des événements spécifiques se produisent sur des éléments. Lorsque vous travaillez avec des éléments liés aux données, il est important d'accéder aux données associées lors de la gestion des événements. C'est là que le changement de modèle d'écoute d'événements entre D3 v5 et D3 v6 entre en jeu.

D3 v5 et versions antérieures

Dans les versions D3 5 et antérieures, les éléments suivants pattern a été utilisé :

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

Ici, d représente la donnée de l'élément déclenchant l'événement, i est son index et les nœuds sont le groupe d'éléments actuel. Les informations sur les événements sont accessibles dans l'écouteur d'événements à l'aide de d3.event.

D3 v6 et au-delà

Dans D3 v6, le modèle a été modifié pour :

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

Maintenant, l'événement est transmis directement à l'auditeur comme premier paramètre, et la donnée est le deuxième paramètre. En conséquence, la variable globale d3.event a été supprimée.

Accès à la donnée

Pour récupérer la donnée liée du nœud qui a déclenché l'événement dans D3 v6 , utilisez simplement le paramètre d dans la fonction d'écoute d'événement. Ceci est démontré dans le code corrigé ci-dessous :

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

Autres changements notables

• ceci : Vous pouvez toujours utiliser d3. select(this) pour accéder à l'élément actuel dans la fonction d'écoute d'événement, mais sa portée peut différer lors de l'utilisation des fonctions fléchées.
• Positionnement : Pour obtenir les positions x et y de l'événement déclencheur par rapport au SVG, utilisez d3.pointer(event) au lieu de d3.mouse(this).
• Propriétés de l'événement : Les événements exposent désormais leurs propriétés directement plutôt que via d3.event. Par exemple, event.x et event.y remplacent d3.event.x et d3.event.y.

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!