Plotly.js 的响应标志导致在调整 window 大小时出错
Responsive flag for Plotly.js results in error when resizing window
我们在 Vue/Nuxt 单页应用程序中使用 Plotly.js。为确保创建的绘图在其父 DOM 节点更改时自动调整大小（例如，当用户更改 window 大小时），我们为 Plotly 图表启用了 responsive: true 选项。
启用此标志会在用户更改屏幕大小（如预期）时自动调整绘图大小。但是，在调整 window 大小时多次记录以下错误：
Error: Resize must be passed a displayed plot div element.
为单个情节或简单示例重现此内容似乎不起作用。从我们目前发现的情况来看，这似乎只在多个图可见时才会发生。
通过调试堆栈跟踪中的代码，我们发现这是由于没有正确销毁之前渲染的图造成的。
显然，当绘图不可见且设置了 responsive: true 标志时，可能会抛出此错误。
在我们的案例中发生的事情是，我们的应用程序的某些组件在组件被销毁时不会调用 Plotly.purge($myPlot)（例如，如果用户导航到另一个页面，就会发生这种情况）。未破坏的图将保留在内存中但保持不可见，因此每当调整浏览器 window 大小时都会触发上述错误。我们能够通过比较抛出此错误的图的 DOM 节点 ID 与可见的图的节点 ID 来识别这一点。
我们在 Vue/Nuxt 单页应用程序中使用 Plotly.js。为确保创建的绘图在其父 DOM 节点更改时自动调整大小（例如，当用户更改 window 大小时），我们为 Plotly 图表启用了 responsive: true 选项。
启用此标志会在用户更改屏幕大小（如预期）时自动调整绘图大小。但是，在调整 window 大小时多次记录以下错误：
Error: Resize must be passed a displayed plot div element.
为单个情节或简单示例重现此内容似乎不起作用。从我们目前发现的情况来看，这似乎只在多个图可见时才会发生。
通过调试堆栈跟踪中的代码，我们发现这是由于没有正确销毁之前渲染的图造成的。
显然，当绘图不可见且设置了 responsive: true 标志时，可能会抛出此错误。
在我们的案例中发生的事情是，我们的应用程序的某些组件在组件被销毁时不会调用 Plotly.purge($myPlot)（例如，如果用户导航到另一个页面，就会发生这种情况）。未破坏的图将保留在内存中但保持不可见，因此每当调整浏览器 window 大小时都会触发上述错误。我们能够通过比较抛出此错误的图的 DOM 节点 ID 与可见的图的节点 ID 来识别这一点。