Chuyển tiếp lặp trong D3

Question

Trình bày khái quát: Tôi là một người mới của D3.

Mục tiêu của tôi là di chuyển từ điểm A đến điểm B, sau đó xuất hiện lại ngay tại điểm A và lặp lại quá trình chuyển đổi đó. Tôi đã thử rất nhiều thứ khác nhau, nhưng đây là điều gần nhất tôi đã đến.

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); 
      }); 
    })(); 
}; 

Kết quả là một quá trình chuyển đổi khởi đầu tuyệt vời, tiếp theo là dòng một cách nhanh chóng nhảy giữa điểm A và điểm B KHÔNG có hiệu lực duration(4000) bit. Tôi cũng đã thử xóa dòng ở dưới cùng (d3.select(this).remove()) rồi thêm một dòng mới ở đầu mỗi cuộc gọi để lặp lại(). Tôi cũng đã thử chỉ cần đặt lại x1, x2, y1 và y2 và bỏ qua quá trình chuyển đổi hoàn toàn. Tôi không nói rằng tôi đã thử những điều đó một cách chính xác, nhưng kết quả của tôi không có dòng nào cả, các dòng vô hạn, hoặc một dòng duy nhất đạt tới điểm B và ở đó.

Bất kỳ đề xuất nào khác về cách hoàn thành mục tiêu (có khả năng rất đơn giản) của tôi? Cám ơn rất nhiều về sự giúp đỡ của bạn!

Answer 1

Dường như với tôi rằng bạn không cần phải chỉ định tọa độ bắt đầu hai lần. Bạn chỉ có thể gán các tọa độ ban đầu bên trong hàm lặp lại và gọi nó ngay lập tức như vậy:

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); 
    } 
} 

Dưới đây là một fiddle