Dash 包在 Python 中如何工作？

Question

我正在学习包Dash，这是制作仪表板网页最流行的包。以下是示例代码：

from dash import Dash, dcc, html, Input, Output, callback

import plotly.express as px
import json

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)
fig = px.scatter(x=["a", "b", "c"], y=[1, 2, 3])
fig.update_layout(clickmode='event+select')

fig.update_traces(marker_size=20)

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig
    ),
    html.Div(id="hover-data"),
    html.Div(id="click-data"),
])


@callback(
    Output('hover-data', 'children'),
    Input('basic-interactions', 'hoverData'))
def display_hover_data(hoverData):
    return str(hoverData)

@callback(
    Output('click-data', 'children'),
    Input('basic-interactions', 'clickData'))
def display_click_data(clickData):
    return json.dumps(clickData, indent=2)


if __name__ == '__main__':
    app.run(debug=True, port="8081")

我试图理解函数

display_hover_data

的参数

hoverData

来自哪里？

它是来自网址

response

上的帖子

_dash-update-component

吗？

    def _setup_routes(self):
        self._add_url(
            "_dash-component-suites/<string:package_name>/<path:fingerprinted_path>",
            self.serve_component_suites,
        )
        self._add_url("_dash-layout", self.serve_layout)
        self._add_url("_dash-dependencies", self.dependencies)
        self._add_url("_dash-update-component", self.dispatch, ["POST"])
        self._add_url("_reload-hash", self.serve_reload_hash)
        self._add_url("_favicon.ico", self._serve_default_favicon)
        self._add_url("", self.index)

        if jupyter_dash.active:
            self._add_url(
                "_alive_" + jupyter_dash.alive_token, jupyter_dash.serve_alive
            )

        # catch-all for front-end routes, used by dcc.Location
        self._add_url("<path:path>", self.index)

Answer 1

在 callabscks 上，似乎有一个发往

_dash-update-component

的发布请求。对于 hove 事件，该请求的有效负载是

{"output":"hover-data.children","outputs":{"id":"hover-data","property":"children"},"inputs":[{"id":"basic-interactions","property":"hoverData","value":{"points":[{"curveNumber":0,"pointNumber":0,"pointIndex":0,"x":"a","y":1,"bbox":{"x0":153.7,"x1":173.7,"y0":340,"y1":360}}]}}],"changedPropIds":["basic-interactions.hoverData"]}

您可以通过检查源代码、导航到网络选项卡并选择 Fetch/XHR 来从浏览器获取此信息

您通过选择响应而不是负载来查看响应。所有浏览器都有类似的工具，但我使用的是 Chrome。