Reactjs Reaction Ploly：如何在多个子情节中共享zoom 状态

我在我的应用程序中使用了react-plotly.js，关于如何在多个子图中配置共享的x轴的文档似乎很少，我想知道其他人是否已经成功地配置了<Plot />以获得该结果.

在我的 case 中，我有3个垂直堆叠的小情节.我正在寻找这样的结果，当我放大其中一个子情节时，其他的也会以相同的比例放大.

以下是我拥有的一些代码片段:

import Plot from "react-plotly.js";

function MyComponent() {

  const layout = useMemo(
    (): Partial<Plotly.Layout> => ({
      grid: { rows: 3, columns: 1, pattern: "independent", subplots: ["xy", "x2y2", "x3y3"] },
      autosize: true,
      xaxis: { anchor: "y", domain: [0, 0.99], showticklabels: false },
      xaxis2: { anchor: "y2", domain: [0, 0.99], showticklabels: false },
      xaxis3: {
        anchor: "y3",
        domain: [0, 0.99],
        showticklabels: true,
        title: {
          text: "Time",
          font: {
            size: 16,
          },
        },
      },
      yaxis: {
        anchor: "x",
        domain: [0.67, 0.93],
      },
      yaxis2: {
        anchor: "x2",
        domain: [0.33, 0.59],
      },
      yaxis3: {
        anchor: "x3",
        domain: [0, 0.26],
      },

      margin: {
        t: 15,
        b: 75,
        l: 80,
      },
      legend: {
        x: 1,
        y: 0.5,
      }
    }), []
  );

  return (
    <Plot layout={layout} config={{ autosizable: true }} data={[...]} />
  )

}

希望有人能设法让这件事起作用，并能分享自己的见解.