瞭解d3球彈跳

我碰到下面的代碼，使球彈跳。除了接下來的兩行內容，我明白了一切。 .style轉換函數做了什麼？瞭解d3球彈跳

我怎麼可以用.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);

來源

2015-09-24 devdropper87

的setInterval的調用每3秒跳動功能，在那些3秒第一球過渡向下（動畫向下），因爲在第一次調用ball.transition的哪個需要1.5秒，當這個過渡結束時，它立即調用移動球的第二個過渡，這也需要1.5秒，這種情況不會停止，因爲setInterval

來源

2015-09-24 03:57:51 Saar

我的問題是有關頂部的前兩行，.style（）...。 – devdropper87

'.style（「top」，bounceBottom）'更改元素CSS樣式的'top'屬性。因爲元素的位置是'absolute'或'relative'，所以你可以設置例如'top：50px'，這意味着它將離開父級（非靜態）容器50px。因爲你使用過渡如果我設置'top：50px'並將過渡設置爲'1.5s'，在這種情況下它將把球從'top：0px'移動到'top：50px'1.5秒。 OK。 – Saar

https://developer.mozilla.org/en-US/docs/Web/CSS/top – Saar

-1

要使用.each，請在您的後面添加.each('start', bounce)最後.transition()

來源

2016-01-28 06:36:38 LittleMissRed

這不是問題的要求。他們被使用，OP想知道他們做了什麼。 –

回答

相關問題