Ejecuto Plotly.react en un setInterval para actualizar un gráfico cada segundo con datos tomados de una base de datos. De acuerdo con la documentación de Plotly, Plotly.react hace el mismo trabajo que Plotly.newPlot, pero es más eficiente cuando se llama para reemplazar un gráfico existente.
Mi problema es que cada vez que setInterval ejecuta Plotly.react, la <div class="user-select-none svg-container" style="position: relative; width: 100%; height: X;"> generada por el (se puede ver en el inspector de páginas de su navegador) alterna entre X = 100% y X = 450px .
Esto da como resultado que la oración "Este texto sigue moviéndose..." se mueve hacia arriba (detrás de la trama) y hacia abajo (debajo de la trama) constantemente. Plotly.newPlot no tiene este problema (probado en Firefox 95 y Edge 96).
¿Hay alguna manera de evitar este comportamiento manteniendo la eficiencia de redibujado de Plotly.react?
Ejemplo mínimo con valores constantes en el gráfico:
index.html :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script> </head> <body> <div id='plotDiv'><!-- Plotly chart will be drawn inside this div --></div> <p>This text keeps moving up and down but is not supposed to.</p> </body> <script src="plot.js"></script> </html> plot.js :
setInterval(function(){ Plotly.react( 'plotDiv', [{"x":[0,1,2,3,4,5],"y":[17,36,1,14,5,7],"mode":"markers+lines","type":"scatter"}], {title: "Some title"}, {responsive: true} ); }, 1000);Editar: descubrí que el problema ocurre en Firefox solo cuando se accede a la página a través de Apache (ejecutado localmente con Xampp), no cuando el navegador lee directamente el html. Ocurre en ambos casos en Edge.