從 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：

→ 然后，當從下拉列表中選擇一個選項時：