从 Dash Cytoscape 的下拉菜单中选择不同的元素选项

Question

我试图在这个例子中使用不同的元素列表，'A' 和 'B' 作为我的网络图下拉列表的选项。 我更新了元素，但它没有出现在更改中。 我想知道需要更正什么，以便我可以使用下拉菜单选择不同的图形（'A' 或 B）。 请在下面找到我的代码。

import dash
import dash
from dash import dcc
from dash import html
import pandas as pd
import dash_cytoscape as cyto
from dash.dependencies import Input, Output
import plotly.express as px

elements_list = {
        'A' : [{'data': {'id': 'ca', 'label': 'Canada'}},
        {'data': {'id': 'on', 'label': 'Ontario'}},
        {'data': {'id': 'qc', 'label': 'Quebec'}},
        {'data': {'source': 'ca', 'target': 'on'}},
        {'data': {'source': 'ca', 'target': 'qc'}}],
        'B' : [{'data': {'id': 'ca', 'label': 'Canada'}},
        {'data': {'id': 'on', 'label': 'Ontario'}},
        {'data': {'id': 'qc', 'label': 'Quebec'}}]
}

graphs = ['A', 'B']

app = dash.Dash(__name__)

my_layout = {'name': 'grid'}
my_style = {'display': 'inline-block', 'width': '1000px', 'height': '800px', 'border': '2px black solid'}

app.layout = html.Div(children=[
        html.H1("My Network", style={'color': 'black', 'fontSize': 32}),
        html.Br(),
        dcc.Dropdown(
                id='graph-input',
                value=graphs[0],
                clearable=False,
                options=[
                        [{'label': graphs[i], 'value': graphs[i]} for i in range(0, len(graphs))]
                ]
        ),
        html.Br(),
        cyto.Cytoscape(
                id='network-output',
                elements=elements_list['A'], # How do I have an option for different elements here?
                layout=my_layout,
                style=my_style
        ),
        html.Br()
])

@app.callback(Output('network-output', 'elements'),
        Input('graph-input', 'value'))

def update_elements(value):
        elements = elements_list[value]

if __name__ == '__main__':
        app.run_server(debug=False, host='0.0.0.0', port=8051)

提前致谢。

Answer 1

我不是 100% 确定您想要通过加拿大信息实现什么，但是，假设您想弄清楚如何编码同步的自定义更改，其中从下拉列表中选择一个选项会更改网络图，我已经演示了非常基本的示例模板。

我查看了您的代码和 Dash Cytoscape 文档，并且能够弄清楚我认为您可能想要尝试做什么。 看看我所做的这些更改，如果这有帮助和/或您有任何其他问题，请告诉我； 很高兴能提供帮助，因为我现在也在自己学习 Dash 🙂：

import dash
import dash
import dash_cytoscape as cyto
import pandas as pd

from dash import dcc
from dash import html
from dash import no_update
from dash.dependencies import Input
from dash.dependencies import Output

graphs = ["A", "B"]

app = dash.Dash(__name__)

my_layout = {"name": "grid"}
my_style = {
    "display": "inline-block",
    "width": "1000px",
    "height": "800px",
    "border": "2px black solid",
}

app.layout = html.Div(
    children=[
        html.H1("My Network", style={"color": "black", "fontSize": 32}),
        html.Br(),
        dcc.Dropdown(
            id="graph-input",
            placeholder="Select a Node",
            clearable=False,
            value=None,
            options=[{"label": i, "value": i} for i in graphs],
        ),
        html.Br(),
        cyto.Cytoscape(
            id="network-output",
            elements=[
                {
                    "data": {"id": "A", "label": "A"},
                    "position": {"x": 75, "y": 75},
                    "classes": "A",
                },
                {
                    "data": {"id": "B", "label": "B"},
                    "position": {"x": 200, "y": 200},
                    "classes": "B",
                },
                {"data": {"source": "A", "target": "B"}},
            ],  # How do I have an option for different elements here?
            layout=my_layout,
            style=my_style,
            stylesheet=[
                {
                    "selector": "node",
                    "style": {"width": "50px", "height": "50px"},
                }
            ],
        ),
        html.Br(),
    ]
)


@app.callback(
    [Output("network-output", "stylesheet")], Input("graph-input", "value")
)
def update_elements(value):
    if value:
        return (
            [
                {
                    "selector": f".{value}",
                    "style": {
                        "background-color": "#FD8008",
                        "background-opacity": "0.8",
                        "border-color": "#00C1FF",
                        "border-width": "2",
                        "width": "55px",
                        "height": "55px",
                        "label": "data(label)",
                    },
                }
            ],
        )
    else:
        return no_update


if __name__ == "__main__":
    app.run_server(
        debug=True, host="0.0.0.0", port=8051, dev_tools_hot_reload=True
    )

这导致以下结果，其中选择“A”或“B”分别突出显示节点 A 或 B：

→ 然后，当从下拉列表中选择一个选项时：