如何在 Python 中获取 Plotly Dash Graph 上的点击事件坐标数据？答案

【问题标题】：How to obtain Click Event Coordinate Data on Plotly Dash Graph in Python?如何在 Python 中获取 Plotly Dash Graph 上的点击事件坐标数据？
【发布时间】：2021-10-17 04:25:07
【问题描述】：

我已经尝试在网络上导航以找到解决此问题的方法，但没有成功。我找到的最接近的解决方案是this，但是，它在 R 中，过去两天我一直在尝试在 Python 中寻找解决方案。

我已经搞砸了Plotly Dash's documentation here on Interactive Graphing，clickData 和 hoverData 似乎只输出图表上被点击/悬停在实际数据点上的坐标数据。我的目标是通过在图形上单击两次鼠标来获得一对 x,y 坐标，这样我就可以使用这对坐标在图形上画一条线。但是，似乎 Plotly 的 Dash Interactive Graphing 在提供不在实际数据点上的鼠标坐标数据的能力方面受到限制。是否有任何解决方法或我错过的明显解决方案/部分文档？

【问题讨论】：

标签： python plotly plotly-dash

【解决方案1】：

您可以创建一条额外的透明点轨迹，这些透明点均匀地散布在图形上
那么这是一个使用clickData回调的简单案例
完整代码如下

import numpy as np
import pandas as pd
import plotly.express as px
import math, json
import dash
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash

GS = 100
fig = px.line(
    x=np.linspace(0, 1, 300), y=(np.sin(np.linspace(0, math.pi * 3, 300)) / 2) + 0.5
).add_traces(
    px.scatter(
        x=np.repeat(np.linspace(0, 1, GS), GS), y=np.tile(np.linspace(0, 1, GS), GS)
    )
    .update_traces(marker_color="rgba(0,0,0,0)")
    .data
)

# Build App
app = JupyterDash(__name__)
app.layout = dash.html.Div(
    [dash.dcc.Graph(id="graph", figure=fig), dash.html.Div(id="where")]
)


@app.callback(
    Output("where", "children"),
    Input("graph", "clickData"),
)
def click(clickData):
    if not clickData:
        raise dash.exceptions.PreventUpdate
    return json.dumps({k: clickData["points"][0][k] for k in ["x", "y"]})


# Run app and display result inline in the notebook
app.run_server(mode="inline")

【讨论】：