在 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"的原始值（存储在"orig_x"）和 svg 画布的宽度减去矩形的原始宽度之间来回翻转"x"的值。 目的是使矩形不断"水平"来回移动的可视化效果。

原始数据集为：

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

替换为图表的 HTMLdiv 是：

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