D3 mouseover geçişleri "takılı kalıyor"

Gezinme menüsü için düzenli gezinme efektleri oluşturmak istediğimi, ancak CSS yerine D3 geçişlerini etkiyi "yumuşatmak" için kullanıyorum. Bu .on-yöntem için mouseover ve mouseout kullanarak çalışır. Bununla birlikte, problem, geçiş yapılmadan önce fare, gezinen bağlantıyı terk ederse geçişin sıkışmasıdır. Bu yan etki nasıl önlenir? ÖrneğinD3 mouseover geçişleri "takılı kalıyor"

, bu kod ile, alt sınır hala çok hızlı yaparsanız fare, başka bir yere taşındı sonra bile turuncu renkte görüntülenir:

d3.selectAll("a") 
    .on("mouseover", function() { 
     d3.select(this) 
     .style("border-bottom-color", "#fff") 
     .transition() 
     .duration(1000) 
     .style("border-bottom-color", "#B23600"); }) 
    .on("mouseout", function() { 
     d3.select(this) 
     .style("border-bottom-color", "#fff"); });

kaynak

2013-02-18 Anonymous

Bilmiyorum mükemmel cevap, ama mouseout süresi önce çağrılır ve tamamlandığında şüpheli (1s) arasında mouseover tamamlandı. Belki mouseout için 1100 süresi? – cmonkey

Ayrıca, http://bost.ocks.org/mike/transition/ adresindeki okuma d3 sürümleri 2 ve 3 arasında farklılıklar olduğunu gösterir. Hangi sürümü kullanıyorsunuz? – cmonkey

Mükemmel bir cevabınız yok, ancak: Örneğin, örneğinizde olduğu gibi, HTML (SVG yerine) kullanıyorsanız, d3 geçişlerini tamamen atlayabilir ve bunun yerine css geçişlerini kullanabilirsiniz. Bu, sahip olduğunuz problemi kesinlikle çözecek ve daha performanslı olacak. Eski tarayıcıların kullanıcıları bir geçiş yapmazlar, ama oh ... – meetamit

Ben ne olup bittiğini düşündükleri zaman ki .transition sadece mouseover, 'da var, geçiş hala 1000 msn süresi dolmadan ayrıldığınızda rotasını yönetmiyor. Böylece erken ayrıldığınızda, fare geçişi geçişi hala çalışıyor, ve bu geçişi geçersiz kılmak için mouseout olayında bir geçiş çağrısı yok. (Anlaşılan bile mouseout olay mouseover olayla ilişkili .transition duracaktır.)

Ancak, belirtildiği gibi, mouseout olayı bir transition koymak yaptığınızda, sorun kaybolduktan. Ve inanıyorum ki, bu nedenle transition mouseout mouseover.transition üzerinde önceliğe sahiptir, bu nedenle mouseout olayında bir .transition olması, mouseout olayını tekrar kontrol altına alır.

mouseout olayında .transition yorumunu bildirirseniz, işlemi burada görebilirsiniz.

Ayrıca

http://jsfiddle.net/Ldmv6/1/

okunmaya değer Scott Murray's yaklaşan d3 kitaptan Bölüm 10: http://ofps.oreilly.com/titles/9781449339739/_interactivity.html

kaynak

2013-02-18 21:12:50 mg1075

Açıklamak için çok teşekkürler! –

Mouseout üzerinde geçiş eklemek, bu örnekte bu sorunu çözmez. http://jsfiddle.net/t466vL71/ – bartburkhardt

Ok, dynamicColor yaklaşımını kaldırarak çözdünüz http://jsfiddle.net/w9q6uh25/ – bartburkhardt

D3 mouseover geçişleri "takılı kalıyor"

cevap

İlgili konular