I have spin wheel made using d3.js.
I want the wheel to rotate infinitely or for a given timer value.
On calling the spin() function under a setTimeout, the wheel does rotates infinitely but it stops with decreasing speed and re-starts slowly. However I want to persist the speed of previous rotation round.
function spin(d){
$('#spin').on("click", null);
if(oldpick.length == data.length){
console.log("done");
$('#spin').on("click", null);
return;
}
var ps = 360/data.length,
pieslice = Math.round(1440/data.length),
rng = Math.floor((Math.random() * 1440) + 360);
rotation = (Math.round(rng / ps) * ps);
const offsetToTop = Math.ceil(360/ps/4) - 1;
picked = Math.round(data.length - (rotation % 360)/ps) - offsetToTop;
if(picked >= data.length){
picked = picked % data.length;
}else if(picked < 0){
picked = 0;
}
if(oldpick.indexOf(picked) !== -1){
d3.select(this).call(spin);
return;
} else {
oldpick.push(picked);
}
rotation += 90 - Math.round(ps/1);
vis.transition()
.duration(1000)
.attrTween("transform", rotTween)
.each("end", function(){
console.log(picked);
oldrotation = rotation;
alert(data[picked].xp);
});
}
function rotTween(to) {
var i = d3.interpolate(oldrotation % 360, rotation);
return function(t) {
return "rotate(" + i(t) + ")";
};
}
Please refer the codepen
The default ease for for a d3 transition is "slow-in slow-out" which produces the effect you describe as "stops with decreasing speed and re-starts slowly". It sounds like you want a "linear" transition which uses the same speed throughout. To do that use:
Note, you are using a very old version of
d3. The call to.easewould be different with a more modern version. My answer is for the version you are using (v3).Edits for comments...