Understanding d3 ball bounce

Question

I came across the following code that makes a ball bounce. I understand everything except what is happening in the two following lines. What do the .style transition functions do exactly?

How could I have written this using .each() instead of a setInterval ? The documentation for d3 hasn't really clarified it sufficiently to the point where I can fully understand it.

 .style("top", bounceBottom)
 .style("top", bounceTop).transition()

//full code:

var bounceTop = 0 + 'px';
var bounceBottom = (height - radius * 2) + 'px';

var ball = d3.select('.container').selectAll('div')
  .data([0]).enter().append('div').attr('class', 'ball')
  .style({
    top: bounceTop,
    left: width / 2 - radius + 'px',
    width: radius * 2 + 'px',
    height: radius * 2 + 'px'
  });

function bounce() {
  ball.transition()
    .duration(1500)
    .ease("cubic-in")
    .style("top", bounceBottom)

  .transition()
    .ease("cubic-in")
    .duration(1500)
    .style("top", bounceTop).transition()

}

setInterval(function() {
  bounce();
}, 3000);

Answer 1

setInterval每3秒调用一次bounce函数，在这3秒内由于第一次调用ball而使球向下过渡（动画向下） ball.transition耗时1.5秒，当此过渡结束时它立即调用第二过渡球上升也需要1.5秒，并且由于setInterval而不会停止

Answer 2

要使用.each，请在最后一个.each('start', bounce)之后添加.each('start', bounce) .transition()