Comment accéder aux données de 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

Problème :

Dans D3 v6, lors de l'utilisation de selection.on() pour ajouter un écouteur d'événement de survol aux nœuds, les données d'événement sont renvoyées à la place des données du nœud. Comment obtenir la donnée ?

Réponse :

D3v5 et versions antérieures :

Dans D3 v5 et versions antérieures, le Le modèle suivant a été utilisé pour définir un écouteur d'événement :

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

Où d est 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 avec d3.event.

D3v6 :

Dans D3 v6, le modèle d'écoute d'événement est devenu :

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

Maintenant, l'événement est passé directement comme premier paramètre à l'écouteur, tandis que la donnée est le deuxième paramètre. d3.event a été supprimé.

Utilisation de d3.select(this)

Dans la fonction d'écoute d'événement, d3.select(this) peut toujours être utilisé pour sélectionner l'élément déclencheur, même dans D3 v6. Cependant, lors de l'utilisation des fonctions fléchées, cela aura une portée différente.

Positionnement :

Pour obtenir la position x,y de l'événement, qui a été précédemment récupérée avec d3.mouse(this), vous pouvez maintenant utiliser d3.pointer(event). Pour accéder directement aux propriétés x et y, utilisez event.x et event.y au lieu de d3.event.x et d3.event.y.

Exemple :

L'exemple suivant montre comment transmettre l'événement et la donnée à une fonction d'écoute d'événement dans 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));
  });

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!