D3.js
  • D3.js Nedir, Ne Değildir?
  • JS Grafik Kütüphaneleri
  • Modüler D3.js
    • D3.js Eklenti Oluşturma
  • Başlangıç
  • Seçiciler
  • Element Biçimlendirme
  • Olaylar (Events)
  • Geçişler ve Animasyonlar
    • Kontrol Fonksiyonları
    • Bir Geçişin Yaşam Döngüsü
  • Ölçekler (Scales)
    • Sürekli Girdili ve Sürekli Çıktılı
    • Sürekli Girdili ve Kesikli Çıktılı
    • Kesikli Girdili ve Gesikli Çıktılı
  • Eksen (Axes)
  • Şekiller (Shapes)
    • Çizgi (line) Oluşturucu
    • Area (alan) Oluşturucu
    • Stack (yığın) Oluşturucu
    • Arc (yay) Oluşturucu
    • Pie (pasta) Oluşturucu
    • Symbols (semboller)
  • Düzenler (Layouts)
    • Tree Layout
    • Cluster Layout
    • Treemap Layout
    • Pack Layout
    • Partition Layout
    • Chord Layout
    • Force Layout
  • Kaynaklar
Powered by GitBook
On this page

Was this helpful?

  1. Geçişler ve Animasyonlar

Kontrol Fonksiyonları

Geçişleri yönetmek için aşağıdaki fonksiyonlar kullanılarak daha gelişmiş bir kullanım sağlanabilir.

transition.end()

Seçilen her öğenin geçişi tamamladığında bir promise döner. Herhangi bir öğenin geçişi iptal edilir veya kesilirse, promise reject olur.

transition.transition.on(typenames[, listener])

Belirtilen olayın adları için seçilen her öğeye bir dinleyici ekler veya kaldırır. Aşağıdaki olaylar dinlenerek işlem yapılabilir:

  • start - geçiş başladığında tetiklenir.

  • end - geçiş bittiğinde tetiklenir.

  • interrupt - geçiş kesildiğinde tetiklenir.

  • cancel - geçiş iptal edildiğinde tetiklenir.

İsteğe bağlı olarak bir nokta (.) ve bir ad eklenebilir; start.foo ve start.bar gibi aynı türde olayları almak için birden fazla geri çağrının kaydedilmesini sağlar. Birden çok seçim belirlemek için, interrupt end veya start.foo start.bar gibi boşluklarla ayırabilirsiniz.

Seçilen bir düğümde belirli bir geçiş olayı gönderildiğinde, belirtilen dinleyici, geçerli DOM öğesi olarak this, geçerli veri olarak d ve element sırası (i)

i`‘yi geçiren geçiş öğesi için çağrılır. Dinleyiciler her zaman öğeleri için en son verileri görürler, ancak sıra numarası seçimin bir özelliğidir ve dinleyici atandığında sabittir; dizini güncellemek için dinleyiciyi yeniden atayabilirsiniz.

Bir olay dinleyicisi daha önce seçilen bir öğede aynı tip adı için kaydedilmişse, eski dinleyici yeni dinleyici eklenmeden önce kaldırılır. Bir dinleyiciyi kaldırmak için, dinleyici olarak boş geçebilirsiniz. Belirli bir isimdeki tüm dinleyicileri kaldırmak için, dinleyici olarak null değerini ve .foo seçicisini kullanırsınız. Adı olmayan tüm dinleyicileri kaldırmak için, . ile seçim yaparsınız.

transition.on('.', null)
transition.on('.foo', null)

transition.each(function)

Seçili her öğe için belirtilen işlevi çağırır, geçerli veri d ve i sıra numarası, geçerli DOM öğesine this kullanarak ulaşılabilir. Bu yöntem, seçilen her öğe için rasgele kod çağırmak için kullanılabilir ve aynı anda üst ve alt verilere erişmek için bir alan oluşturmak için kullanışlıdır.

transition.call(function[, arguments…])

İsteğe bağlı bağımsız değişkenlerle birlikte bu geçişi geçirerek belirtilen işlevi tam olarak bir kez çağırır. Bu, işlevi normal çağırmaya eşdeğerdir ancak yöntem zincirlemesini (method chaining) kolaylaştırır. Örneğin, yeniden kullanılabilir bir fonksiyonda birkaç özellik ayarlamak için:

function color(transition, fill, stroke) {
  transition
    .style("fill", fill)
    .style("stroke", stroke);
}

Artık bu şekilde kullanılabilir:

d3.selectAll("div").transition().call(color, "red", "blue");

Aşağıdaki ile aynı işlevi görür:

color(d3.selectAll("div").transition(), "red", "blue");

transition.empty()

Bu geçiş (null olmayan) öğe içermiyorsa true değerini döndürür.

transition.nodes()

Bu geçişteki tüm (null olmayan) öğelerin bir dizisini döndürür.

transition.node()

Bu geçişteki ilk (null olmayan) öğeyi döndürür. Geçiş boşsa, null değerini döndürür.

transition.size()

Bu geçişteki toplam öğe sayısını döndürür.

PreviousGeçişler ve AnimasyonlarNextBir Geçişin Yaşam Döngüsü

Last updated 5 years ago

Was this helpful?