页面上的多个图在调整一个图大小时重新缩放

Question

我在一个页面上有大约 10 个图都是动态创建的。为了节省 space 它们都从小开始，用户可以在想要近距离观察时按一个按钮 "enlarge" 它们。在小模式和大模式下，用户都可以根据需要缩放和操作，但是当用户缩放一个图然后切换另一个图的大小时，他们正在将图 "snaps" 调整为第一个图的缩放配置文件。

希望我没有解释得太混乱。这是调整大小的代码片段。

            $(document.getElementById(expArr[index])).click( function() {
                $(gd).toggleClass('clk');
                Plotly.Plots.resize(gd);
            });

expArr 只保存按钮的 ID，因为它们是在代码隐藏中动态创建的，gd 保存绘图所在的 div。切换 div 的 class只需更改包含 height/width.

的 class

所有调整大小都可以正常工作。只是当您调整一个图的大小并缩放，然后调整第二个图的大小时，第二个图 "snaps" 到第一个图上完成的缩放。

Answer 1

我发现我做错了什么。我敢肯定，如果我发布更多代码，就会有人注意到我的错误。

基本上我使用了一个带有循环的函数来在页面上绘制我的所有绘图，但是我将我的布局变量留在了所有这些之外，所以它是同一个对象被重复用于每个绘图。因此，当我在绘图上调用 resize 时，它看到布局已更改并更新为新数据。

只需移动布局即可解决问题

页面上的多个图在调整一个图大小时重新缩放

Multiple plots on page rezoom when resizing one

javascript

plotly