Olaylar (Events)

Diğer tüm kütüphanelerde olduğu gibi, D3.js’de de elementlerin olaylarını dinleyebilirsiniz. Bir olay dinleyicisini d3.selection.on() yöntemini kullanarak herhangi bir DOM öğesine bağlayabiliriz. on() yöntemi, seçilen tüm DOM öğelerine bir olay dinleyicisi ekler.

İlk parametre “click”, “mouseover” vb. gibi bir string türüdür. İkinci parametre, bir olay meydana geldiğinde yürütülecek bir fonksiyon ve üçüncü isteğe bağlı parametre capture belirtilebilir. W3C useCapture bayrağı. Aşağıdaki tabloda, önemli olay işleme yöntemi ve nesneleri listelenmektedir.

d3.selection.on(type[, listener[, capture]]);

Metod	Açıklama
selection.on()	click, mouseover, mouseout vb. gibi olayları yakalamak için etkinlik dinleyicileri ekleyin veya kaldırın.
d3.event	Zaman damgası gibi standart olay alanlarına erişmek için olay nesnesi veya prevDefault gibi yöntemler
d3.mouse(container)	Belirtilen DOM öğesinde geçerli fare konumunun x ve y koordinatlarını alır.
d3.touch()	Dokunma koordinatlarını alır

Örnek:

Özel Olaylar

Standart olaylar dışında istersek kendi olaylarımızı ekleyebiliyoruz. Özel bir olay eklemek için diğerleri gibi bir isim verip .on() fonksiyonuna parametre olarak veriyoruz. Bu olayları tetiklemek için dispatch fonksiyonunu kullanıyoruz. İlk parametre olay ismi ve ikinci opsiyonel parametre olarak veri gönderebiliriz. Gönderilen veriyi olay dinleyici fonksiyon içinde kullanmak için d3.event.detail kullanılır.

d3.selection.dispatch(type[, data]);

Örnek: