d3.js
Om evenemang

Syntax

• .on ('mouseover', funktion)
• .on ('mouseout', funktion)
• .on ('klicka', funktion)
• .on ('muscenter', funktion)
• .on ('mouseleave', funktion)

Anmärkningar

Bifoga grundläggande händelser vid val

Ofta vill du ha händelser för dina objekt.

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)

Det här exemplet lägger till klass spanOver när du svävar över ett span inuti div med id divID och tar bort det när musen lämnar span.

Som standard passerar d3 datumet för det aktuella intervallet och indexet. Det är verkligen praktiskt att det this sammanhanget är det aktuella objektet också så att vi kan göra operationer på det, som att lägga till eller ta bort klasser.

Du kan också bara använda en anonym funktion på evenemanget.

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

Dataelement kan också läggas till det nuvarande valda objektet.

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

I det här exemplet definieras inte aktivt i markeringen innan klickhändelsen avfyras. Om du skulle gå tillbaka över sökvägen men alla klickade objekt skulle innehålla den active tangenten.

Ta bort händelse lyssnaren

d3.js har inte en .off() -metod för att koppla bort befintliga händelselister. För att ta bort en händelsehanterare måste du ställa in den till null :

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