Как лучше всего правильно перемещать прямоугольники вперед и назад, по горизонтали и бесконечно в D3?

Исходный код и визуализация находятся по адресу: http://bl.ocks.org/Guerino1/6aa3861bcbe96c343103

Я пытаюсь связать переходы для прямоугольников. При переходе я считаю, что перезаписываю атрибут «x», используя код:

      rectangle.transition()
        .ease("linear")
        .duration(1500)
        .attr("x", function(){ 
          if(x == orig_x){
            var retVal =  dataSet.svgWidth-Number(width);
            return retVal;
          }
          else{
            var retVal = Number(orig_x);
            return retVal;
          }
        })

Похоже, проблема заключается в том, что приведенный выше код не перезаписывает значение "x" при первом выполнении перехода. Когда я прохожу через отладчик, в следующий раз, когда я прохожу через функцию flip(), «x» по-прежнему устанавливается в исходное значение, хотя кажется, что retValue возвращал другое значение в последний раз (для этого конкретного прямоугольника) . ПРИМЕЧАНИЕ. Я использую разные цвета, чтобы быть уверенным, что работаю с одинаковыми прямоугольниками.

Этот код заключен в функцию под названием «flip()», которая вызывается циклом while, предназначенным для переключения значения «x» туда и обратно между исходным значением «x» (хранящимся в «orig_x») и ширина холста svg минус исходная ширина прямоугольника. Намерение — это визуализация, которая заставляет прямоугольники продолжать смещаться «горизонтально» вперед и назад.

Исходный набор данных:

  var dataSet7 = [];
    dataSet7.svgWidth = 400;
    dataSet7.svgHeight = 95;
    dataSet7.r1 = {"x": 0, "y": 0, "w": 50, "h": 30, "color": "Red"};
    dataSet7.r2 = {"x": 10, "y": 30, "w": 150, "h": 30, "color": "Yellow"};
    dataSet7.r3 = {"x": 20, "y": 60, "w": 90, "h": 30, "color": "Blue"};

Раздел HTML, который заменяется диаграммой:

      <td class="td_tableBody" colspan="1">
        <div class="div_RootBody">
          <h3 class="h3_Body">Continuous Transition</h3>
          <p>Transitions the x-axis continuously.</p>
          <div id="simple_rectangle9"></div>
        </div>
      </td>

Для вызываемой функции:

      function drawRectangle9( dataSet, selectString ) {

function flip(){
      var rectangle = d3.select(this);
      var width = rectangle.attr("width");
      var x = rectangle.attr("x");
      var orig_x = rectangle.attr("orig_x");
          // Just for debug info...
          var y = rectangle.attr("y");
          var height = rectangle.attr("height");
          var color = rectangle.attr("color");
      rectangle.transition()
        .ease("linear")
        .duration(1500)
        .attr("x", function(){ 
          if(x == orig_x){
            var retVal =  dataSet.svgWidth-Number(width);
            return retVal;
          }
          else{
            var retVal = Number(orig_x);
            return retVal;
          }
        })
    };

    // Extract Rectangles from dataSet
    var rectangles = [];
      rectangles[0] = dataSet.r1;
      rectangles[1] = dataSet.r2;
      rectangles[2] = dataSet.r3;

    var svgContainer = d3.select(selectString).append("svg:svg")
        .attr("width", dataSet.svgWidth)
        .attr("height", dataSet.svgHeight);

    var arrayOfRectangles = svgContainer.selectAll("rect")
        .data(rectangles)
      .enter().append("svg:rect")
        .attr("class", "rect_flip1")
        .attr("x", function(d){ return d.x; })
        .attr("orig_x", function(d){ return d.x; })
        .attr("y", function(d){ return d.y; })
        .attr("width", function(d){ return d.w; })
        .attr("height", function(d){ return d.h; })
        .attr("color", function(d){ return d.color; })
        .style("fill", function(d){ return d.color; });

    var i = 0;
    while(i++ < 10){
      var rectangles = d3.selectAll(".rect_flip1")
      rectangles.each(flip);
    }

  }

Вызов функции, которая выполняет вышеуказанную функцию:

drawRectangle9(dataSet7, "#simple_rectangle9");

Мой вопрос: как лучше всего правильно перемещать прямоугольники вперед и назад по горизонтали бесконечно?