来自 js 脚本的 Dash Cytoscape 数据答案

【问题标题】：Dash Cytoscape data from js script来自 js 脚本的 Dash Cytoscape 数据
【发布时间】：2022-11-04 14:56:09
【问题描述】：

我正在尝试从 Dash Cytoscape 获取节点位置数据。我找到了这个解决方案https://community.plotly.com/t/dash-cytoscape-returning-node-positions-from-layout/23818/4 但我无法从 python 中的浏览器控制台获取数据。我怎样才能做到这一点？

【问题讨论】：

到目前为止，您尝试过什么，请您在哪个部分苦苦挣扎？
为了保护 OP - 你如何运行 js 脚本，获得所需的输出，并将其与 dash python 一起使用？我不知道..

标签： python python-3.x plotly-dash cytoscape.js cytoscape

【解决方案1】：

要从 js 脚本中获取数据，您可以使用 Clientside Callback。如记录的here，客户端回调

创建一个回调，通过调用客户端 (JavaScript) 函数而不是 Python 函数来更新输出

要使用它，您可以例如将 JavaScript 代码写入 Python 代码，如下所示：
from dash import Dash, dcc, html, Input, Output

app = Dash(...)

# Using a Store component and a Button to trigger the callback
app.layout = html.Div(
    [
        html.Button(id="your-button"),
        dcc.Store(id="js-data")
    ]
)

app.clientside_callback(
"""
function (n_clicks) {
    // Insert your JS code here and return
    ...
    return data
}
""",
Output("js-data", "data"),
Input("your-button", "n_clicks")
)

@app.callback(
    Output("..."),  # This depends on your application
    Input("js-data", "data")
)
def work_with_js(data):
    # Do whatever you want with your data
如您所见，该示例使用 Button 来触发 JavaScript 代码并在 dcc.Store 组件中返回一些数据。该数据随后在另一个回调中使用，并且可以进行操作。

【讨论】：