d3.js
Sur les événements

Syntaxe

• .on ('mouseover', fonction)
• .on ('mouseout', fonction)
• .on ('clic', fonction)
• .on ('mouseenter', fonction)
• .on ('mouseleave', fonction)

Remarques

Joindre des événements de base sur des sélections

Souvent, vous voudrez avoir des événements pour vos objets.

function spanOver(d,i){
  var span = d3.select(this);
  span.classed("spanOver",true);
}

function spanOut(d,i){
  var span = d3.select(this);
  span.classed("spanOver", false);
}

var div = d3.select('#divID');

div.selectAll('span')
  .on('mouseover' spanOver)
  .on('mouseout' spanOut)

Cet exemple ajoutera la classe spanOver lors du spanOver un intervalle à l'intérieur du div avec l'id divID et le supprimera lorsque la souris quittera le span.

Par défaut, d3 transmettra le datum de la plage actuelle et de l'index. Il est très pratique que this le contexte actuel, de sorte que nous puissions y effectuer des opérations, comme ajouter ou supprimer des classes.

Vous pouvez également simplement utiliser une fonction anonyme sur l'événement.

div.selectAll('span')
  .on('click', function(d,i){ console.log(d); });

Des éléments de données peuvent également être ajoutés à l'objet sélectionné.

div.selectAll('path')
  .on('click', clickPath);

function clickPath(d,i) {
  if(!d.active) {
    d.active = true;
    d3.select(this).classed("active", true);
  }
  else {
    d.active = false;
    d3.select(this).classed("active", false);
  }
}

Dans cet exemple, active n'est pas définie sur la sélection avant que l'événement click ne soit déclenché. Si vous deviez revenir sur la sélection du chemin, tous les objets cliqués contiendraient la clé active .

Supprimer un écouteur d'événement

d3.js n'a pas de méthode .off() pour détecter les écouteurs d'événements existants. Pour supprimer un gestionnaire d'événement, vous devez le définir sur null :

d3.select('span').on('click', null)