jimmybow / visdcc

Dash Core Components for Visualization.
MIT License
144 stars 18 forks source link

how to update the nodes and edges of the visdcc.network #18

Closed lijuanLin closed 4 years ago

lijuanLin commented 4 years ago

hi, thanks for your visdcc, it really works for me. i still have some question to ask for help! i use the visdcc.network to plot the graph, and i want to implement a function, when i select a node, it will just show the path the node to root, and when i click blank space, it will return to the whole graph like before. here is my code: app.layout = html.Div([ html.Div(id='vis_div',children=[visdcc.Network(id='vis_graph', data=data, options=options, selection={'nodes': [], 'edges': []})]) ])

@app.callback( [Output('vis_div','children')], [Input('vis_graph', 'selection')]) def myfun(selection): try: node = selection['nodes'][0] new_data = get_full_path(node) print(new_data)

    return [visdcc.Network(id='vis_graph',
                           data=new_data,
                           options=options,selection={'nodes': [], 'edges': []})]
except:
    return [visdcc.Network(id='vis_graph',
                           data=data,
                           options=options,selection={'nodes': [], 'edges': []})]

this code does not work, and if I change the id of the new path data, it can work, but it can not return to the previous graph, here is my graph. app.layout = html.Div([ html.Div(id='vis_div',children=[visdcc.Network(id='vis_graph', data=data, options=options, selection={'nodes': [], 'edges': []})]) ]) @app.callback( [Output('vis_div','children')], [Input('vis_graph', 'selection')]) def myfun(selection): try: node = selection['nodes'][0] new_data = get_full_path(node) print(new_data)

    return [visdcc.Network(id='vis_graph_path',
                           data=new_data,
                           options=options,selection={'nodes': [], 'edges': []})]
except:
    return [visdcc.Network(id='vis_graph',
                           data=data,
                           options=options,selection={'nodes': [], 'edges': []})]

@app.callback( [Output('vis_div','children')], [Input('vis_graph_path', 'selection')]) def myfun(selection): return [visdcc.Network(id='vis_graph', data=data, options=options,selection={'nodes': [], 'edges': []})]

that code will raise exceptions: dash.exceptions.DuplicateCallbackOutput: Multi output ..vis_div.children.. contains an Output object that was already assigned. or can I highlight some important nodes and edges in other simple way? hope you can solve my question, thanks for your help!

jimmybow commented 4 years ago

just output your new_data to data prop. of visdcc component in app.callback function.

@app.callback(
Output('vis_graph','data'),
[Input('vis_graph', 'selection')])
def myfun(selection):
    .......
    return your_new_data