d3.js
Zu Veranstaltungen

Syntax

• .on ('mouseover', Funktion)
• .on ('mouseout', Funktion)
• .on ('klick', funktion)
• .on ('mouseenter', Funktion)
• .on ('mouseleave', Funktion)

Bemerkungen

Anhängen grundlegender Ereignisse an Auswahlen

Oft möchten Sie Ereignisse für Ihre Objekte haben.

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 diesem Beispiel wird die Klasse spanOver wenn Sie mit der id divID über einen Bereich innerhalb des div- spanOver schweben, und entfernen, wenn die Maus den Bereich verlässt.

Standardmäßig übergibt d3 das Datum des aktuellen Bereichs und den Index. Es ist wirklich praktisch, dass der Kontext this Objekts auch das aktuelle Objekt ist, sodass wir darauf Operationen ausführen können, beispielsweise Klassen hinzufügen oder entfernen.

Sie können auch eine anonyme Funktion für das Ereignis verwenden.

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

Datenelemente können auch zum aktuell ausgewählten Objekt hinzugefügt werden.

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 diesem Beispiel ist aktiv nicht für die Auswahl definiert, bevor das Klickereignis ausgelöst wird. Wenn Sie die Pfadauswahl erneut durchführen würden, würden alle angeklickten Objekte den active Schlüssel enthalten.

Event-Listener entfernen

d3.js verfügt nicht über eine .off() -Methode, um vorhandene Ereignislistener abzugleichen. Um einen Event-Handler zu entfernen, müssen Sie ihn auf null :

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