d3.js
Op evenementen

Syntaxis

• .on ('mouseover', functie)
• .on ('mouseout', functie)
• .on ('klik', functie)
• .on ('mouseenter', functie)
• .on ('muismuis', functie)

Opmerkingen

Basisgebeurtenissen aan selecties toevoegen

Vaak wilt u gebeurtenissen voor uw objecten hebben.

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)

In dit voorbeeld wordt de klasse spanOver wanneer u met de id divID over een span binnen de div divID en wordt deze verwijderd wanneer de muis de span verlaat.

Standaard geeft d3 het datum van de huidige overspanning en de index door. Het is echt handig dat this context ook het huidige object is, zodat we er bewerkingen op kunnen uitvoeren, zoals klassen toevoegen of verwijderen.

Je kunt ook gewoon een anonieme functie gebruiken voor het evenement.

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

Gegevenselementen kunnen ook worden toegevoegd aan het huidige geselecteerde object.

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 dit voorbeeld wordt actief niet gedefinieerd in de selectie voordat de click-gebeurtenis wordt geactiveerd. Als u terug zou gaan over de padselectie, hoewel alle aangeklikte objecten de active sleutel zouden bevatten.

Event-luisteraar verwijderen

d3.js heeft geen .off .off() methode om bestaande gebeurtenislisteners te ontgrendelen. Om een gebeurtenishandler te verwijderen, moet u deze op null :

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