d3.js
En eventos

Sintaxis

• .on ('mouseover', función)
• .on ('mouseout', función)
• .on ('clic', función)
• .on ('mouseenter', función)
• .on ('mouseleave', función)

Observaciones

Adjuntar eventos básicos en selecciones.

Muchas veces querrás tener eventos para tus objetos.

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)

Este ejemplo agregará la clase spanOver cuando se spanOver sobre un espacio dentro del div con el ID de divID y lo eliminará cuando el mouse salga del espacio.

Por defecto, d3 pasará el dato del intervalo actual y el índice. Es muy útil que this 's contexto es el objeto actual, así por lo que podemos hacer operaciones en él, como añadir o eliminar clases.

También puede usar una función anónima en el evento.

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

Los elementos de datos también se pueden agregar al objeto seleccionado actual.

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

En este ejemplo, activo no está definido en la selección antes de que se active el evento de clic. Si tuviera que volver sobre la selección de ruta, todos los objetos en los que se haga clic contendrían la clave active .

Eliminar escucha de eventos

d3.js no tiene un método .off() para asignar detectores de eventos existentes. Para eliminar un controlador de eventos, debe configurarlo como null :

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