d3.js
Wydarzenia

Składnia

• .on („kursor myszy”, funkcja)
• .on („mouseout”, funkcja)
• .on („kliknięcie”, funkcja)
• .on („mouseenter”, funkcja)
• .on („mouseleave”, funkcja)

Uwagi

Dołączanie podstawowych wydarzeń dotyczących wybranych elementów

Często będziesz chciał mieć wydarzenia dla swoich obiektów.

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)

Ten przykład doda klasę spanOver po najechaniu spanOver na zakres wewnątrz div z id divID i usunie go, gdy mysz wyjdzie z zakresu.

Domyślnie d3 przekaże punkt odniesienia dla bieżącego zakresu i indeksu. To naprawdę przydatne, że this kontekst jest również bieżącym obiektem, abyśmy mogli wykonywać na nim operacje, takie jak dodawanie lub usuwanie klas.

Możesz również użyć anonimowej funkcji na wydarzeniu.

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

Elementy danych można również dodawać również do aktualnie wybranego obiektu.

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

W tym przykładzie aktywne nie jest zdefiniowane dla zaznaczenia przed uruchomieniem zdarzenia kliknięcia. Gdybyś cofnął się do wyboru ścieżki, chociaż wszystkie kliknięte obiekty zawierałyby active klucz.

Usuń detektor zdarzeń

d3.js nie ma metody .off .off() do detekcji istniejących detektorów zdarzeń. Aby usunąć moduł obsługi zdarzeń, musisz ustawić go na null :

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