Plotly如何禁用X轴拖拽功能且保留框选缩放特性

方案一：Plotly参数配置 #

直接通过布局和配置参数实现需求，无需额外CSS：

1. 给所有X轴设置fixedrange: True，禁用X轴的拖拽平移功能；
2. 将默认拖拽模式设为select，确保框选缩放为默认交互；
3. 调整模式栏按钮，移除平移工具、保留框选工具，避免误操作。

示例代码：

# 设置X轴禁用拖拽平移
fig.update_layout(
    xaxis={'fixedrange': True},
    xaxis2={'fixedrange': True},
    dragmode='select'  # 默认开启框选模式
)

# 配置模式栏按钮，只保留需要的工具
fig.show(config={
    'modeBarButtonsToRemove': ['pan2d', 'pan'],  # 移除平移类按钮
    'modeBarButtonsToAdd': ['select2d', 'lasso2d']  # 添加上框选、套索缩放工具
})

这样设置后，X轴无法被拖拽平移，但依然可以通过框选区域完成缩放，多轴场景下也不会出现仅缩放单个轴曲线的异常。

方案二：CSS/JS拦截交互（适合参数方案无效的场景） #

如果参数配置无法满足需求，可以通过CSS禁用X轴区域的拖拽事件，同时保留绘图区域的框选功能。在项目的assets文件夹下创建custom.css文件，添加以下样式：

/* 禁用X轴相关元素的拖拽交互 */
.js-plotly-plot .xaxislayer-above,
.js-plotly-plot .xaxislayer-below,
.js-plotly-plot .x2axislayer-above,
.js-plotly-plot .x2axislayer-below {
    pointer-events: none;
}

/* 确保绘图区域正常响应框选事件 */
.js-plotly-plot .gl-container {
    pointer-events: auto;
}

注意：这个方法会同时禁用X轴上的悬停提示等其他交互，如果需要保留这些功能，可以改用JavaScript监听拖拽事件，仅阻止X轴的平移操作：

// 在页面中添加这段JS代码
document.addEventListener('DOMContentLoaded', function() {
    const plot = document.querySelector('.js-plotly-plot');
    plot.addEventListener('mousedown', function(e) {
        // 判断点击区域是否为X轴
        if (e.target.classList.contains('xaxislayer-above') || e.target.classList.contains('xaxislayer-below') ||
            e.target.classList.contains('x2axislayer-above') || e.target.classList.contains('x2axislayer-below')) {
            e.stopPropagation(); // 阻止事件传递，避免触发平移
        }
    });
});

内容的提问来源于stack exchange，提问作者Raphael Fernandes