D3.js - Geçiş
Geçiş, bir öğenin bir durumundan diğerine geçiş sürecidir. D3.js, birtransition()HTML sayfasında geçiş gerçekleştirme yöntemi. Bu bölümde geçiş hakkında bilgi edinelim.
Geçiş () yöntemi
Geçiş () yöntemi tüm seçiciler için mevcuttur ve geçiş sürecini başlatır. Bu yöntem - attr (), style () vb. Gibi seçim yöntemlerinin çoğunu destekler. Ancak, transition () yönteminden önce çağrılması gereken append () ve data () yöntemlerini desteklemez. Ayrıca, duration (), easy (), vb. Gibi geçişe özgü yöntemler sağlar. Basit bir geçiş aşağıdaki gibi tanımlanabilir -
d3.select("body")
.transition()
.style("background-color", "lightblue");D3.transition () yöntemi kullanılarak doğrudan bir geçiş oluşturulabilir ve ardından aşağıdaki gibi seçicilerle birlikte kullanılabilir.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Minimal Bir Örnek
Şimdi, geçişin nasıl çalıştığını anlamak için temel bir örnek oluşturalım.
Yeni bir HTML dosyası oluşturun, transition_simple.html aşağıdaki kod ile.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").transition().style("background-color", "lightblue");
</script>
</body>
</html>Burada seçtik bodyöğesi ve ardından transition () yöntemini çağırarak geçişi başlattı. Ardından, arka plan rengini mevcut renkten geçirme talimatı verdik,white -e light blue.
Şimdi tarayıcıyı yenileyin ve ekranda arka plan rengi beyazdan açık maviye değişir. Arka plan rengini açık maviden griye değiştirmek istersek, aşağıdaki geçişi kullanabiliriz -
d3.select("body").transition().style("background-color", "gray");