Comment obtenir la donnée du nœud au survol de la souris dans D3 v6

Impossible d'obtenir les données de nœud lors du survol de la souris dans D3 v6

Dans D3 v6, le mécanisme de gestion des événements a subi des modifications importantes par rapport aux versions précédentes. Cet article examine ces modifications et fournit des solutions à un problème courant rencontré lors de la tentative de récupération des données du nœud lors d'un événement de survol de la souris.

Gestion des événements dans D3 v5 et versions antérieures

Dans D3 v5 et versions antérieures , le modèle de gestion des événements suivait ce format :

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

Dans la fonction d'écoute, d représentait la donnée de l'élément déclencheur, i était son index et les nœuds étaient le groupe d'éléments actuel. De plus, les informations sur les événements sont accessibles avec d3.event.

Gestion des événements dans D3 v6

Dans D3 v6, le modèle de gestion des événements a été modifié comme suit :

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

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

Obtention des données du nœud

Pour récupérer les données du nœud dans D3 v6, vous pouvez utiliser le nouveau modèle de gestion des événements. L'exemple suivant montre comment gérer l'événement de survol et accéder aux données :

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

Positionnement et autres propriétés de l'événement

Pour accéder à la position x, y de l'événement déclencheur, utilisez d3. pointeur (événement) au lieu de d3.mouse (this). Pour obtenir les propriétés x et y, utilisez event.x et event.y au lieu de d3.event.x et d3.event.y.

Résumé

Les principaux changements dans la gestion des événements dans D3 v6 implique de transmettre l'événement comme premier paramètre et d'utiliser event.currentTarget au lieu de d3.select(this). De plus, d3.pointer(event) remplace d3.mouse(this) à des fins de positionnement. Comprendre ces changements vous permettra de gérer efficacement les événements dans vos applications D3 v6.

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!