d3.js - 如何在 d3 中正确重复嵌套转换？

Question

目前，下面的代码以起伏的方式移动方 block ，但我想更改它以便有一个行进波(就像他们在体育场内所做的那样)。我想我要做的是弄清楚如何为重复循环添加延迟，以便第一个方 block 下降并保持下降状态，直到最后一个方 block 开始上升。

这是我的代码和一个 jsfiddle :

var margin = {top: 40, bottom: 40, left: 40, right: 40},
    width = 960 - margin.left - margin.right,
    height = 200 - margin.bottom - margin.top;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var n = 20,
    rect_width = 20,
    padding = 1, 
    speed = 1000,
    item_delay = 40;

var x = d3.scale.ordinal()
    .domain(d3.range(n))
    .rangePoints([0, n * (rect_width + padding)]);

var rects = svg.selectAll(".rect")
    .data(x.domain())
  .enter().append("rect")
    .attr("x", function(d,i){ return x(i); })
    .attr("y", 0)
    .attr("height", rect_width)
    .attr("width", rect_width)
    .attr("class", "rect")
  .transition() 
    .duration(speed)
    .delay(function(d,i){ return i * 120; })
    .each(start_repeat);

function start_repeat(){
    var rect = d3.select(this);
    (function repeat(){
        rect = rect.transition()
            .attr("y", 0)
          .transition()
            .attr("y", 100)
            .each("end", repeat);    
    })()
}

我认为我的问题是我并不真正理解 repeat 函数内部发生了什么。

更新

我想出了一个简单的循环过渡，但它需要我手动计算循环持续时间，我想避免这种情况(请参阅实时版本的片段)。

speed = 500;
var loop_duration = 2000;
(function loop(){
rects.transition()
    .delay(function(d,i){ return i * item_delay; })
    .duration(speed)
    .attr("y", 100) // down
  .transition()
    .attr("y", 0)
setTimeout(loop, loop_duration)
})()    

var margin = {top: 40, bottom: 40, left: 40, right: 40},
    width = 960 - margin.left - margin.right,
    height = 300 - margin.bottom - margin.top;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var n = 20,
    rect_width = 20,
    padding = 1, 
    speed = 500,
    item_delay = 100;

var x = d3.scale.ordinal()
    .domain(d3.range(n))
    .rangePoints([0, n * (rect_width + padding)]);

var rects = svg.selectAll(".rect")
    .data(x.domain())
  .enter().append("rect")
    .attr("x", function(d,i){ return x(i); })
    .attr("height", rect_width)
    .attr("width", rect_width)
    .attr("class", "rect")
    .attr("y", 0); // up - very important, if you don't set this, there is no interpolation

var loop_duration = 2000;
(function loop(){
    rects.transition()
        .delay(function(d,i){ return i * item_delay; })
        .duration(speed)
        .attr("y", 100) // down
      .transition()
        .attr("y", 0)
    setTimeout(loop, loop_duration)
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我已经尝试解析 start_repeat 函数以了解发生了什么，但我仍然不明白。例如，old_rect 和 rect 有什么区别？

function start_repeat() {
  var rect = d3.select(this);
  (function repeat() {
    var move_down_t0 = rect.transition() // chain the down-transition on the same selection
        .attr("y", 100);

     var move_up_t1 = move_down_t0.transition()
        .attr("y", 0)

     old_rect = rect;
     rect = move_up_t1.each("end", repeat);
  })();
}

Answer 1

我自己有点困惑，但我尝试将持续时间和延迟设置为相等，这样只要设置了值，过渡就会持续。

试试这个:

var rects = svg.selectAll(".rect")
    .data(x.domain())
  .enter().append("rect")
    .attr("x", function(d,i){ return x(i); })
    .attr("y", 0)
    .attr("height", rect_width)
    .attr("width", rect_width)
    .attr("class", "rect")
  .transition() 
    .duration(speed)
    .delay(function(d,i){ return i * (speed/(n*2)); })
    .each(start_repeat);