如何在Plotly极坐标图中实现角度轴范围拖拽选择并获取其relayoutData？

我来帮你搞定这个极坐标角度轴范围选择的问题！你提到的relayoutData默认只返回径向轴范围，是因为Plotly默认没有开启角度轴的拖拽缩放功能，咱们只需要简单配置一下，就能让它返回角度轴的范围，同时实现你想要的拖拽选择效果。

核心思路 #

1. 开启角度轴的拖拽缩放模式：通过修改极坐标布局，设置angularaxis.dragmode="zoom"，这样就能支持拖拽角度轴来选择范围。
2. 捕获角度轴的范围变化：开启后，relayoutData会包含polar.angularaxis.range字段，里面就是拖拽后的角度范围。
3. 处理跨0度的特殊情况：当拖拽范围从330°到30°时，Plotly会返回[330, 390]（因为30°等价于390°），咱们可以在回调里判断并转换成你需要的[330, 30]格式。

修改后的完整代码 #

import json
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)
df = px.data.wind()
fig = px.scatter_polar(df, r="frequency", theta="direction")

# 关键配置：开启角度轴的拖拽缩放模式
fig.update_layout(
    polar=dict(
        angularaxis=dict(
            dragmode="zoom",  # 开启角度轴拖拽缩放
            showgrid=True,
            tickmode="array",
            tickvals=[0, 90, 180, 270],
            ticktext=["0°", "90°", "180°", "270°"]
        )
    )
)

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig
    ),
    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown('''
                **拖拽选择角度范围**
                拖拽角度轴区域即可选择角度范围，跨0°的范围（如330°→30°）也能正常识别。
                '''),
            html.Pre(id='relayout-data'),
        ])
    ])
])

@app.callback(
    Output('relayout-data', 'children'),
    Input('basic-interactions', 'relayoutData'))
def display_relayout_data(relayoutData):
    if relayoutData and 'polar.angularaxis.range' in relayoutData:
        angle_range = relayoutData['polar.angularaxis.range']
        # 处理跨0度的情况：如果结束值大于360，转换成0-360的格式
        if angle_range[1] > 360:
            adjusted_range = [angle_range[0], angle_range[1] - 360]
            relayoutData['polar.angularaxis.adjusted_range'] = adjusted_range
    return json.dumps(relayoutData, indent=2)

if __name__ == '__main__':
    app.run_server(debug=True)

代码说明 #

• 开启拖拽模式：fig.update_layout(polar=dict(angularaxis=dict(dragmode="zoom")))是核心配置，这一步让Plotly支持角度轴的拖拽缩放。
• 捕获角度范围：当你拖拽角度轴后，relayoutData会新增polar.angularaxis.range字段，比如拖拽30°到90°会返回[30, 90]，拖拽330°到30°会返回[330, 390]。
• 跨0度处理：代码里判断如果范围的结束值大于360，就减去360，转换成[330, 30]的格式，方便你后续使用。

这样就能完美实现你想要的效果啦！

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