Written by Oğuzhan İNAN
on August 22, 2019

D3.js Geçişler ve Animasyonlar

D3 geçişli animasyon yapmak istediğimizde bize gerekli fonksiyonları sağlıyor. Geçişler DOM seçimlerinde <selection>.transition() yöntemi kullanılarak yapılır. Aşağıdaki tabloda D3’teki animasyon için önemli yöntemler listelenmiştir.

Yöntem	Açıklama
selection.transition()	seçilen öğeler için bir geçiş zamanlar
transition.duration()	her bir öğe için animasyon süresini milisaniye cinsinden belirtir
transition.ease()	hareket hızını belirtir, örneğin: linear, elastic, bounce, v.b
transition.delay()	animasyondaki gecikmeyi her bir öğe için milisaniye cinsinden belirtir

Animasyon, temelde bir elementin bir surumdan diğerine geçişinden başka bir şey değildir. Bu durumda, bir animasyon DOM öğesinin başlangıç ve bitiş durumları arasında bir geçiş olur.

transition()

d3.selection.transition() yöntemi, geçişin başlangıcını belirtir ve ardından seçilen öğelere farklı geçiş işlevleri uygulanabilir.

transition.ease

ease() işlevi, geçişin hareketini belirtmek ve kontrol etmek için kullanılır. Geçiş şeklini belirtirken bir çok alternatif yol vardır. Bunların gösterildiği bir örnek aşağıda var.

See the Pen d3 ease example by oguzhan (@oguzhaninan) on CodePen.

transition.delay

delay() işlevi, geçişin uygulandığı seçimdeki her öğe için gecikme parametresini ayarlar. Geçiş belirtilen gecikme değerinden sonra başlayacaktır. Aşağıdaki örneğe bakalım.

Dik iki dikdörtgen doğrusal bir şekilde boyutlandırıyoruz. İlk şeklin yüksekliğini 20px’den 100px’e yükseltiyoruz. Daha sonra, ikinci şeklide de aynı şekilde yükseliyoruz. Ancak, ikinci şekle 2000 milisaniyelik bir gecikme uygulayacağız, böylece ilk çubuktan 2000 milisaniye sonra boyutlanacak.

<!doctype html>
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>
      var svg = d3.select("body").append("svg")
        .attr("width", 500).attr("height", 500);

      var bar1 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 100).attr("y", 20)
        .attr("height", 20).attr("width", 10)

      var bar2 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 120).attr("y", 20)
        .attr("height", 20).attr("width", 10)

      update();

      function update() {
        bar1.transition()
          .ease(d3.easeLinear).duration(2000).attr("height",100)

        bar2.transition()
          .ease(d3.easeLinear).duration(2000).delay(2000).attr("height",100)
      }
    </script>
  </body>
</html>

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`‘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.

Bir Geçişin Yaşam Döngüsü

selection.transition veya transition.transition gibi bir geçiş oluşturduktan hemen sonra, transition.delay, transition.duration, transition.attr ve transition.style gibi yöntemleri kullanarak geçişi yapılandırabilirsiniz. Hedef değerleri belirten yöntemler (transition.attr) eşzamanlı olarak değerlendirilir; Bununla birlikte, interpolasyon için start.attrTween ve transition.styleTween gibi başlangıç değeri gerektiren yöntemler, geçiş başlayana kadar ertelenmelidir.

Geçiş başladığında, aynı öğe üzerinde, eğer varsa, kayıtlı dinleyicilere bir kesme olayı göndererek keser. (Kesmelerin yaratılışta değil, başlangıçta gerçekleştiğine ve böylece sıfır gecikmeli bir geçişin bile aktif geçişi hemen kesmeyeceğine dikkat edin. Geçiş daha sonra kayıtlı dinleyicilere bir start olayı gönderir. Bu, geçişin değiştirilebileceği son andır: geçişin zamanlaması, dinleyicileri çalışırken değiştirilemez; bunu yapmaya çalışmak “çok geç: zaten çalışıyor” (veya geçiş sona erdiyse, “geçiş bulunamadı”) mesajıyla hataya neden olur. Geçiş aradan hemen sonra aralarını başlatır.

Bir geçişin etkin olduğu her kare için, aralarını 0 ile 1 arasında değişen bir t-değeri ile çağırır.

Bir geçiş sona erdiğinde, kayıtlı dinleyicilere bir (‘end’ event) bitiş olayı gönderir. Bu, geçişin dinlenebileceği son andır: bittikten sonra, geçiş elementten silinir ve konfigürasyonu kaldırılır. (Bir geçişin yapılandırması ayrıca kesme veya iptal (interrupt veya cancel) durumunda da yok edilir.) Yok edildikten sonra bir geçişi kontrol etmeye çalışmak, “geçiş bulunamadı” mesajıyla birlikte bir hataya yol açar.