在 D3 中来回、水平和无限期地正确过渡矩形的最佳方法是什么？

Question

原始代码和可视化位于： 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" 的值在 [=40= 的原始值之间来回翻转]（存储在"orig_x"）和svg的宽度canvas减去矩形的原始宽度。目的是使矩形不断来回移动 "horizontally,"。

原数据集为：

  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 div 是：

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

  }

在 D3 中来回、水平和无限期地正确过渡矩形的最佳方法是什么？

What's the best way to properly transition the rectangles, back and forth, horizontally, and indefinitely in D3?

transition

rectangles

d3.js