Question

原始代码和可视化位于： http://bl.ocks.org/Guerino1/6aa3861bcbe96c343103

我正在尝试链接矩形的过渡。当我过渡时，我相信我会覆盖＆＃34; x＆＃34;属性，使用代码：

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

问题似乎，上述代码不会覆盖＆＃34; x＆＃34;值，当执行转换时，第一次。当我逐步调试调试器时，下一次单步执行flip（）函数时，＆＃34; x＆＃34;仍然设置为其原始值，即使看起来retValue上次返回不同的值（对于该特定矩形）。注意：我使用不同的颜色以确保我使用一致的矩形。

此代码包含在一个名为＆＃34; flip（）＆＃34;的函数中。由while循环调用，用于翻转＆＃34; x＆＃34;的值。来回＆＃34; x＆＃34;的原始值之间来回（存储在＆＃34; orig_x＆＃34;中）和svg画布的宽度减去矩形的原始宽度。意图是一种可视化，使矩形保持水平移动，＃34;来回。

原始数据集是：

  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中正确转换矩形，来回，水平和无限期的最佳方法是什么？

1 个答案: