D3.js - Geçiş API'si

D3 Geçişleri, bir dizi öğe ve her öğe için; elemanın mevcut tanımının bir kısmına geçiş uygular.

API'yi Yapılandırma

Aşağıdaki komut dosyasını kullanarak geçiş API'sini yapılandırabilirsiniz.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

Geçiş API Yöntemleri

Geçiş API yöntemlerini detaylı olarak inceleyelim.

Elemanların Seçilmesi

Çeşitli seçim öğelerini ayrıntılı olarak tartışalım.

selection.transition([name])- Bu yöntem, adla yeni bir seçim geçişi döndürmek için kullanılır. Bir isim belirtilmezse, boş döndürür.
selection.interrupt([name]) - Bu yöntem, geçişin seçilen öğelerini adla kesmek için kullanılır ve aşağıda tanımlanmıştır.

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) - Bu yöntem, belirtilen adın belirtilen düğümde geçişini kesmek için kullanılır.
d3.transition([name]) - Bu yöntem, belirtilen adla yeni bir geçiş döndürmek için kullanılır.
transition.select(selector) - Bu yöntem, belirtilen seçici ile eşleşen ilk öğeyi seçmek için kullanılır ve aşağıda tanımlanan sonuç seçimde bir geçiş döndürür.

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector)- Bu yöntem, belirtilen seçiciyle eşleşen tüm öğeleri seçmek için kullanılır ve elde edilen seçimde bir geçiş döndürür. Aşağıda tanımlanmıştır -

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) - Bu yöntem, belirtilen filtre ile eşleşen elemanları seçmek için kullanılır, aşağıda tanımlanmıştır.

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other)- Bu yöntem, geçişi diğer geçişlerle birleştirmek için kullanılır. Aşağıda tanımlanmıştır.

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition()- Bu yöntem, seçilen öğelerde yeni bir geçiş döndürmek için kullanılır. Geçiş durduğunda başlaması planlanıyor. Yeni geçiş, bu geçişin adını, süresini ve hareket hızını devralır.

Example - Şu örneği ele alalım.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

Burada vücut sararır ve son geçişten sadece beş saniye önce başlar.

d3.active(node[, name]) - Bu yöntem, adı belirtilen düğümdeki geçişi döndürmek için kullanılır.

Zamanlama Yöntemleri

Geçiş zamanlaması API yöntemlerini ayrıntılı olarak inceleyelim.

transition.delay([value])- Bu yöntem, geçiş gecikmesini belirtilen değere ayarlamak için kullanılır. Seçilen her öğe için bir işlev değerlendirilirse, geçerli DOM öğesi bağlamıyla birlikte geçerli veri 'd' ve 'i' dizinine aktarılır. Bir değer belirtilmezse, geçişteki ilk (boş olmayan) öğe için gecikmenin geçerli değerini döndürür. Aşağıda tanımlanmıştır,

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])- Bu yöntem, geçiş süresini belirtilen değere ayarlamak için kullanılır. Bir değer belirtilmezse, geçişteki ilk (boş olmayan) öğenin süresinin geçerli değerini döndürür.
transition.ease([value])- Bu yöntem, seçilen öğeler için geçiş değerini kolaylaştırmak için kullanılır. Hareket hızı işlevi, animasyonun her karesi için çağrılır ve [0, 1] aralığında normalleştirilmiş "t" süresini geçer. Bir değer belirtilmezse, geçişteki ilk (boş olmayan) öğe için geçerli hareket hızı işlevini döndürür.

Bir sonraki bölümde, d3.js'de sürükle ve bırak konseptini tartışacağız.