Graph 从html.Div子项访问selectedData

为了避免在没有可打印的信息时显示空的图形轴，我将

dcc.graph

返回对象替换为

html.Div（）

，该对象获得

[]

或

[dcc.graph（…）]

的输出回调

现在，我想在selectedData上启用其他操作（如果Div有子图）。以前我可以这样做：

@app.callback(Output('something', 'children'), 
              [Input('graph', 'selectedData')])
def do_stuff(selectedData):
    pass

现在我已经将布局项从

dcc.Graph（…）

更改为

html.Div（[dcc.Graph（…）]）

，我不知道如何访问

selectedData

：

@app.callback(Output('something', 'children'), 
              [Input('graph_div', 'children')])
def do_stuff(children):
    if len(children) > 0:
        graph = children[0]
    # wheres the selectedData now?

---

---

或者，如果有一种方法可以将输入的

id

直接获取到嵌套的

dcc.Graph

的

id

，可能会更容易？当我尝试此操作时，我得到一个错误，即应用程序布局中不存在具有此id的组件。

对于每个组件，应该可以在Dash中注册回调

下面是一个简单的示例，它复制了您正在尝试的操作

import dash
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(id="graph-div",
        children=[
            dcc.Graph(
                id='graph',
                figure={
                    'data': [
                        {
                            'x': [1, 2, 3, 4],
                            'y': [4, 1, 3, 5],
                            'text': ['a', 'b', 'c', 'd'],
                            'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
                            'name': 'Trace 1',
                            'mode': 'markers',
                            'marker': {'size': 12}
                        },
                        {
                            'x': [1, 2, 3, 4],
                            'y': [9, 4, 1, 4],
                            'text': ['w', 'x', 'y', 'z'],
                            'customdata': ['c.w', 'c.x', 'c.y', 'c.z'],
                            'name': 'Trace 2',
                            'mode': 'markers',
                            'marker': {'size': 12}
                        }
                    ],
                    'layout': {
                        'clickmode': 'event+select'
                    }
                }
            ),
        ]
    ),
    html.Div(id="output")
])

@app.callback(Output('output', 'children'), 
              [Input('graph', 'selectedData')])
def do_stuff(selectedData):
    print(selectedData)

if __name__ == '__main__':
    app.run_server(debug=True)

如果您可以发布一个简单的可重新创建的代码，那么调试就会更容易

更新：

如果您正在动态尝试加载组件，则可能会遇到上述问题

一个简单的解决方法是设置此应用程序配置，

app.config['suppress\u callback\u exceptions']=True

这是一个工作示例

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd


#
#https://stackoverflow.com/questions/57580240/access-selecteddata-from-html-div-children
#


graph_layout = dcc.Graph(
                id='graph',
                figure={
                    'data': [
                        {
                            'x': [1, 2, 3, 4],
                            'y': [4, 1, 3, 5],
                            'text': ['a', 'b', 'c', 'd'],
                            'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
                            'name': 'Trace 1',
                            'mode': 'markers',
                            'marker': {'size': 12}
                        },
                        {
                            'x': [1, 2, 3, 4],
                            'y': [9, 4, 1, 4],
                            'text': ['w', 'x', 'y', 'z'],
                            'customdata': ['c.w', 'c.x', 'c.y', 'c.z'],
                            'name': 'Trace 2',
                            'mode': 'markers',
                            'marker': {'size': 12}
                        }
                    ],
                    'layout': {
                        'clickmode': 'event+select'
                    }
                }
            )
app = dash.Dash(__name__)

app.config['suppress_callback_exceptions']=True 

app.layout = html.Div([
    dcc.Dropdown(id="toggle-graph",
        options=[
            {'label': 'on', 'value': 'on'},
            {'label': 'off', 'value': 'off'},
        ],
        value='on'
    ) , 
    html.Div(id="graph-div",
        children=[

        ]
    ),
    html.Div(id="output")
])


@app.callback(Output('graph-div', 'children'), 
              [Input('toggle-graph', 'value')])
def do_stuff(value):
    if(value == 'on'):
        return graph_layout
    else:
        return []


@app.callback(Output('output', 'children'), 
              [Input('graph', 'selectedData')])
def do_stuff(selectedData):
    print(selectedData)

if __name__ == '__main__':
    app.run_server(debug=True)

---

看起来我需要的是一种切换图形显示的方法，而不是有条件地返回整个图形对象：

@app.callback(Output('graph', 'style'), [Input('drop-down', 'value')])
def toggle_container(dropdown_value):
    if something
        return {'display': 'none'}
    else:
        return {'display': 'block'}

---

谢谢我希望整个图形窗格有条件地显示，例如，如果选中复选框。是否可以使用条件布局对象作为回调的输入？