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

Question

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

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

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

Проблема, кажется,, что приведенный выше код не перезаписывает «х» значение, когда переход выполненный в первый раз. Когда я перехожу через отладчик, в следующий раз, когда я перехожу к функции 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"); 

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

Answer 1

Совет от ee2Dev был хорошим, но не конкретным. Ниже приведен конкретный код, который исправляет проблему.

Решение заключается в создании функции, которая возвращается на себя с помощью метода «.each("end", flip)». Затем активируйте функцию с помощью одного вызова этой функции (например, «flip();»).

function drawRectangle9(dataSet, selectString) { 

    // 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 flip = function(){ 
     var selectedRectangles = d3.selectAll(".rect_flip1"); 
     selectedRectangles.transition() 
     .ease("linear") 
     .duration(1500) 
     .attr("x", function(d,i){ 
      var rect = d3.select(this) 
      var x = rect.attr("x") 
      var orig_x = rect.attr("orig_x") 
      var width = rect.attr("width") 
      if(x == orig_x){ 
      var retVal = dataSet.svgWidth-width; 
      return retVal; 
      } 
      else{ 
      var retVal = orig_x; 
      return retVal; 
      } 
     }) 
     .each("end", flip); 
    }; 

    flip(); 

    }