d3.js
Sugli eventi

Sintassi

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

Osservazioni

Allegare eventi di base alle selezioni

Spesso ti piacerebbe avere eventi per i tuoi oggetti.

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)

Questo esempio aggiungerà la classe spanOver quando si passa con il mouse su un intervallo all'interno del div con il divID id e lo si rimuove quando il mouse esce dallo span.

Di default d3 passerà il dato dello span corrente e l'indice. E 'davvero utile che this 'contesto, s è l'oggetto corrente come pure in modo che possiamo fare operazioni su di esso, come aggiungere o rimuovere classi.

Puoi anche usare una funzione anonima anche sull'evento.

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

Gli elementi dati possono anche essere aggiunti all'oggetto selezionato corrente.

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

In questo esempio, l'attivo non è definito sulla selezione prima che l'evento click venga attivato. Se dovessi tornare indietro sulla selezione del percorso, tutti gli oggetti cliccati conterranno la chiave active .

Rimuovi listener di eventi

d3.js non ha un metodo .off() per distinguere i listener di eventi esistenti. Per rimuovere un gestore di eventi, devi impostarlo su null :

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