Question

我遇到了以下使球反弹的代码。我理解除了以下两行中发生的事情之外的一切。 .style过渡函数究竟做了什么？

我怎么能用.each（）而不是setInterval写这个？ d3的文档还没有真正澄清到足以让我完全理解它的地方。

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

//完整代码：

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秒调用一次弹跳功能，在这3秒钟内球首次向下转换（动画向下），因为第一次调用ball.transition需要1.5秒，当这个过渡结束时它立即调用到第二次过渡，将球向上移动也需要1.5秒，这种情况不会因为setInterval

而停止

Answer 2

要使用.each，请在上一次.each('start', bounce)

之后添加.transition()

了解d3球反弹

2 个答案: