React-Plotly如何设置默认缩放级别并将图表居中于原点(0,0)？

要实现这个需求，核心是在layout对象中配置**坐标轴（xaxis/yaxis）**的相关属性，具体操作如下：

关键配置说明 #

• 关闭自动范围：设置xaxis.autorange和yaxis.autorange为false，阻止Plotly自动调整坐标轴范围适配内容。
• 自定义坐标轴范围：通过xaxis.range和yaxis.range定义默认缩放范围，只要让范围以(0,0)为中心，就能实现图表居中。比如x轴设为[-5, 5]、y轴设为[-5, 5]，原点就会处于图表中心，这个区间的大小就是默认的缩放级别。
• 可选：保持坐标轴比例：如果需要避免图表拉伸变形，可添加xaxis.scaleanchor: 'y'和xaxis.scaleratio: 1，让xy轴保持1:1的比例。

修改后的完整代码 #

import React from 'react';
import Plot from 'react-plotly.js';

export default function App() {
  var layout = {
    shapes: [
      {
        type: 'circle',
        xref: 'x',
        yref: 'y',
        x0: -2,
        y0: -1.56,
        x1: 2,
        y1: 2.09,
        opacity: 0.2,
        fillcolor: 'red',
        line: {
          color: 'red'
        }
      }
    ],
    height: 400,
    width: 480,
    showlegend: false,
    dragmode: 'pan',
    // 新增坐标轴配置
    xaxis: {
      autorange: false,
      range: [-5, 5], // 自定义x轴范围，以0为中心
      scaleanchor: 'y', // 绑定y轴比例
      scaleratio: 1 // 保持1:1比例
    },
    yaxis: {
      autorange: false,
      range: [-5, 5] // 自定义y轴范围，以0为中心
    }
  }

  return (
    <Plot
      layout={layout}
    />
  );
}

你可以根据需求调整range数组里的数值：数值区间越大，缩放级别越低（视图越广）；区间越小，缩放级别越高（视图越聚焦）。

内容的提问来源于stack exchange，提问作者Mohamed Yehia