Wiederholte (verkettete) Übergänge D3js

Question

Ich habe mir schon alle Beispiele über verkettete/wiederholte Übergänge dort draußen angesehen (z. B. http://bl.ocks.org/mbostock/1125997), aber ich kann mein Beispiel nicht zur Arbeit bringen.

Ich versuche einen Übergang eine unendliche Anzahl von Malen zu wiederholen, aber irgendwie wie der erste Übergang endet, ändert sich die Position der drei Kreise. Mein Ziel ist es, die Anfangspositionen der Kreise als Übergang zu bezeichnen und den Übergang wieder und wieder und wieder auszuführen ...

Hier ist mein Code.

var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
    width = 800 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom); 

var dataset = [20, 100, 180]; 

var circle = svg.selectAll("circle") 
        .data(dataset) 
        .enter() 
        .append("circle") 
         .attr("cx", function(d) { return d; }) 
         .attr("cy", function(d) { return d; }) 
         .attr("r", 5) 
        .transition() 
         .duration(2000) 
         .attr("cx", function(d) {return d + 80; }) 
         .attr("cy", function(d) {return d + 80; }) 
         .each("end", repeat) 
         .remove(); 


function repeat(){ 

    var circle = svg.selectAll("circle") 
        .data(dataset) 
        .enter() 
        .append("circle") 
         .attr("cx", function(d) { return d; }) 
         .attr("cy", function(d) { return d; }) 
         .attr("r", 5) 
        .transition() 
         .duration(2000) 
         .attr("cx", function(d) {return d + 80; }) 
         .attr("cy", function(d) {return d + 80; }) 
         .each("end", repeat) 
         .remove(); 


}; 

Hier ist mein Arbeitsbeispiel: https://jsfiddle.net/RudiSophieson/1vkwkbks/2/

Vielen Dank im Voraus.

Answer 1

In der Wiederholungsfunktion müssen Sie den Kreis nicht erneut anhängen. Sie müssen nur die cx und cy aktualisieren.

var circle = svg.selectAll("circle") 
         .attr("cx", function(d) { return d; }) 
        .attr("cy", function(d) { return d; }) 
        .attr("r", 5) 
       .transition() 
        .duration(2000) 
        .attr("cx", function(d) {return d + 80; }) 
        .attr("cy", function(d) {return d + 80; }) 
        .each("end", repeat) 
        .remove(); 

Arbeits Code here