1つのページに複数のプロットがあり、1つのページのサイズを変更するときに

Question

私はページ上に約10のプロットを動的に作成しています。スペースを節約するために、それらはすべて小さなものから始まり、ユーザはボタンを押して近くにあるものを見たいときに「拡大」することができます。小さなモードと大きなモードの両方で、ユーザは望みながらズームや操作が可能ですが、ユーザが1つのプロットをズームしてから別のプロットのサイズを切り替えると、サイズ変更しているプロットは最初のプロットのズームプロファイルにスナップします。

うまくいけば私はあまりにも混乱を説明していないことを願っています。ここでは、サイズ変更を行うコードのスニペットを示します。これらは動的分離コードで作成され、GDは、プロットがであるdiv要素を保持しているよう

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

はexpArrはちょうどボタンのIDを保持している。DIVのクラスをToggleingだけで、高さ/幅を保持しているクラスを変更します。

すべてのサイズ変更がうまく動作します。 1つのプロットのサイズを変更してズームした後、2つ目のプロットのサイズを変更すると、2つ目のプロットは最初のプロットで行われたズームに「スナップ」します。

Answer 1

私が間違っていたことを理解しました。誰かが私の間違いに気づいただろうというコードを投稿したのであれば、私は確信しています。

基本的に私は、ループを持つ関数を使ってページ上のすべてのプロットを描画していましたが、私はすべてのレイアウトの外側にvarを残していました。だから、私がプロット上でサイズ変更を呼び出すと、そのレイアウトが変更され、新しいデータに更新されたことがわかりました。単純にレイアウトを移動

は