D3 geçişler - duraklat ve devam

Question

Bu guide'dan D3 geçişleri için 'duraklat' ve 'devam ettirmeyi' anlamaya çalışıyorum. 'Duraklat' nasıl çalıştığını anladığım halde, 'devam etmek' söz konusu olduğunda çok az kayıyorum. Yazarın açıklamalarını, özellikle 'lineer' veya ilk özgeçmiş açıklamalarını anlayamadım. Sorum şu: e.attr("T",0); ve .attr("T",1); tam olarak ne yapıyor?

burada görüntü veya dalga örneğin bir oynatma kafasının için işlevselliği devam başvuruyorum: e.attr("T",0) ve .attr("T",1) setleri seçilir düğüm için niteliklerini jsfiddle

Answer 1

kodu. Yani, yeni bir "T" özniteliği oluşturulur ve ayarlanır. Bunun amacı sadece durmayı ve devam ettirmeyi kolaylaştırmaktır - 0, başlamadan önce bir geçişi ve sonunda 1'i temsil eder.

Bu öznitelik geçişte yer alıyorsa, değer yavaş yavaş 0'dan 1'e değişir. Öğreticinin yazarı belirttiği gibi, bu, geçişin herhangi bir anında geçiş durumunu elde etmek için kullanılabilir. "T" değerini sorgulamanız yeterlidir. Belirli geçişi de kaydederseniz, herhangi bir noktada duraklatmak ve devam ettirmek için değeri kullanabilirsiniz.

"T" hakkında özel bir şey olmadığını unutmayın. Herhangi bir (kullanılmamış) öznitelik adını kullanabilirsiniz. Amaç, yalnızca geçişin ne kadar ilerlediğini anlatmanın bir yolunun olması.

Answer 2

Ben de tam olarak bu sorunla uğraşıyordum ve bence bu, bana atılan örnekte bir yazım hatası var. Yazar diyor Nerede:

var e = d3.select("#time"); 
e.attr("T",0); 

c.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

mantıklı değil c geçişler, olarak T özelliğini güncelleyecek e sanki görünüyor. Bunun yerine ben şöyle olması gerektiğini düşünüyorum:

var e = d3.select("#time"); 
e.attr("T",0); 

e.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

Şimdi #time elemanı seçin, ardından boyunca 1 için T değiştirir aynı elemana geçiş eklemek 0 onun T özelliğinin başlangıç ​​değerini ayarlamak belirtilen süre.