Hi! I’ve made an animating treemap using svelte & plotly.js, it animates correctly with the play buttons and moving the slider. I’ve noticed that when I press play for the first time, the slider moves with the frames. However after if I move the slider to a random number and press play, it only shifts over one time then completely stops as the frames keep moving. If I move it to the very start (first frame), the slider does not move at all. Any thoughts would be great :)) Here’s the relevant code…
for (let block = 0; block < block_range; block++){ //iterator func, to loop thru each block
let block_root = []
let tx_list = []
let values_list = [];
for (let tx_num = 1; tx_num < tx_list_len + 1; tx_num++){ // later change tx_list.length to how many txs in a block (faster if we have that info)
block_root.push("BLOCK " + String(block) + ', ' + String('time')) // time
tx_list.push("Transaction " + String(tx_num))
if (tx_num %2 == 0) { // testing weights
values_list.push(3)
} else {
values_list.push(9)
}
}
if (block %2==0){ // to visualise different
block_root.push("BLOCK " + String(block) + ', ' + String('time')) // time
tx_list.push("Transaction 11")
values_list.push(5)
}
frames[block] = {name: String(block),
data:
[{type: "treemap",
labels: tx_list,
parents: block_root,
textinfo: "label+value+percent parent+percent entry",
values: values_list, // weight list
marker: {colorscale: 'Greens'}
}]
}
}
for (let i = 0; i < frames.length; i++) { // i = min block range
sliderSteps.push({
method: 'animate',
label: String(i), // frame[i]?
args: [[String(i)], { //[frames[i]
mode: 'immediate',
transition: {duration: 300},
frame: {duration: 300, redraw: false},
}]
});
}
var layout = {
'title': "Animation of bitcoin blocks",
width: 700,
height: 500,
sliders: [{
active: 0,
steps: sliderSteps,
x:0,
y:0,
len:0.9,
xanchor: 'left',
yanchor: 'top',
pad: {'t': 50, 'b': 10},
currentvalue: {
visible: false,
prefix: 'Block:',
xanchor: 'right',
font: {size: 20, color: '#666'}
},
transition: {
duration: 300,
easing: "cubic-in-out"
}}],
Plotly.newPlot('myDiv', [frame0], layout) //, {frame: {duration: duration, redraw: false}, frames: frames}
.then(function() {
Plotly.addFrames('myDiv', frames);
})