Javascript 如何使多个D3.js转换以不变的速率重复？

我试图模拟D3中的波浪，正如你在下面的小提琴中看到的，波浪——高度上下转换的多个矩形——在持续时间上发生变化，从一个滚动的波浪变成一堆上下反弹的矩形。任何帮助都将不胜感激

这就是神奇发生的地方：

for (let i = 0; i < numRects; i++) {
  const height = scaleY(seaLevel)
  const bar = svg.append('rect')
    .attr('fill', 'blue')
    .attr('opacity', 0.7)
    .attr('x', i * barWidth + xMargin)
    .attr('width', barWidth)
    .datum({delay: i * 20})

    // add movement
    function repeat (start) {
      const low = scaleY(seaLevel - height)
      const high = scaleY(seaLevel + height)
      bar
        .attr('y', waveBoxHeight - low)
        .attr('height', low)
        .transition()
          .ease(d3.easeQuad)
          .delay((d) => (start) ? d.delay : 0)
          .duration(1000)
          .attr('y', waveBoxHeight - high)
          .attr('height', high)
          .transition()
            .ease(d3.easeQuad)
            .duration(1000)
            .attr('y', waveBoxHeight - low)
            .attr('height', low)
            .on('end', repeat)
    }
    repeat(true)
}

for（设i=0；i（启动）？d.延迟：0）
.持续时间（1000）
.attr（'y'，波箱高度-高）
.attr（“高度”，高）
.transition（）
.ease（d3.easeQuad）
.持续时间（1000）
.attr（'y'，波箱高度-低）
.attr（“高度”，低）
.on（'结束'，重复）
}
重复（正确）
}

您可以应用本bl.ock中描述的策略。查看此选项以满足您的需要。

。当每个条完成转换时，会调用on（'end'）

。您可能只想在所有条完成转换时调用

repeat

。请参阅。