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

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

{"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。 `

没有回调的点击使用

plotly.min.js

中的 JavaScript 函数（我相信

function _(a)

）。如果您从事件侦听器中删除

mousedown

，则单击图表时不会发生任何事情。