D3'te döngü geçişi

Question

Önemli bir açıklama: Birazdan bir D3 kullanıcısıyım.

Amacım, A noktasından B noktasına doğru bir çizgi taşımak, sonra hemen A noktasından tekrar ortaya çıkmak ve bu geçişi tekrarlamaktır. Çok farklı şeyler denedim, ama geldiğim en yakın şey bu.

var svg = d3.select("body") 
     .append("svg") 
     .attr("width", 500) 
     .attr("height", 500); 

// code, code, code, irrelevant code... 

function timeForTimeline(){ // har 
    var timeline = svg.append("line") 
     .attr("stroke", "steelblue") 
     .attr({ 
      'x1': 0, 
      'y1': 130, 
      'x2': 168, 
      'y2': 130 
     }); 
    (function repeat() { 
     timeline = timeline 
      .transition() 
      .duration(4000) 
      .ease("linear") 
      .attr({ 
       'x1': 0, 
       'y1': 430, 
       'x2': 168, 
       'y2': 430 
      }) 
      .each("end", function(){ 
       d3.select(this) 
        .transition() 
        .duration(0) 
        .attr({ 
         'x1': 0, 
         'y1': 130, 
         'x2': 168, 
         'y2': 130 
        }) 
        .each("end", repeat); 
      }); 
    })(); 
}; 

sonucu hızlı duration(4000) bit alma etkisi olmadan nokta A ve nokta B arasındaki atlama çizgi takip mükemmel bir başlangıç ​​geçişi olup. Aynı zamanda (d3.select(this).remove()) satırın altındaki satırı kaldırmayı denedim ve ardından her bir aramanın üstüne yeni bir tane ekleyerek tekrar ediyorum(). Ayrıca x1, x2, y1 ve y2'yi sıfırlamayı ve geçişi tamamen atlamayı denedim. Bunu doğru bir şekilde denediğimi söylemiyorum ama sonuçların ya hiç satır olmadığı, sonsuz çizgiler ya da B noktasına ulaşan ve orada kalan tek bir çizgi vardı.

Benim (muhtemelen çok basit) hedefimi nasıl gerçekleştireceğime dair başka öneriler var mı? Yardımın için çok teşekkürler!

Answer 1

Bana göre, başlangıç ​​koordinatlarını iki kez belirtmeniz gerekmiyor. Sadece tekrar işlevi içinde ilk koordinatları atamak ve bu yüzden gibi hemen diyebiliriz:

İşte

function timeForTimeline() { 
    var timeline = svg.append("line") 
     .attr("stroke", "steelblue"); 

    repeat(); 

    function repeat() { 
     timeline.attr({ 
     'x1': 0, 
     'y1': 130, 
     'x2': 168, 
     'y2': 130 
     }) 
     .transition() 
     .duration(4000) 
     .ease("linear") 
     .attr({ 
     'x1': 0, 
     'y1': 430, 
     'x2': 168, 
     'y2': 430 
     }) 
     .each("end", repeat); 
    } 
} 

bu değiştirildi fiddle Sürüm 4