Looping Übergang in D3

Question

Wesentliche Exposition: Ich bin ein bisschen wie ein D3-Neuling.

Mein Ziel ist es, eine Linie von Punkt A nach Punkt B zu bewegen, dann sofort wieder an Punkt A zu erscheinen und diesen Übergang zu wiederholen. Ich habe viele verschiedene Dinge ausprobiert, aber das ist das, was mir am nächsten kommt.

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

Das Ergebnis ist ein ausgezeichneter Ausgangsübergang, gefolgt von der Linie zwischen Punkt A und Punkt B ohne die duration(4000) Bit zeigt Wirkung schnell zu springen. Ich habe auch versucht, die Zeile am unteren Rand zu entfernen (d3.select(this).remove()) und dann einen neuen an der Spitze jedes Anrufs anzuhängen, um() zu wiederholen. Ich habe auch versucht, einfach x1, x2, y1 und y2 zurückzusetzen und den Übergang ganz zu überspringen. Ich sage nicht, dass ich das richtig versucht habe, aber meine Ergebnisse waren entweder überhaupt keine Linien, unendliche Linien oder eine einzelne Linie, die Punkt B erreicht und dort bleibt.

Irgendwelche anderen Vorschläge, wie man mein (wahrscheinlich sehr einfaches) Ziel erreicht? Vielen Dank für deine Hilfe!

Answer 1

Es scheint mir, dass Sie die Startkoordinaten nicht zweimal angeben müssen. Sie könnten nur die Anfangskoordinaten innerhalb der Repeat-Funktion zuweisen und sie sofort anrufen etwa so:

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

Hier ein ist fiddle