Dash㉚（コールバック停止／部分）

コールバック停止（部分）

no_updateを使って、部分的にコールバックの更新を停止してみます。

コールバックのOuputを２つ設定し、値が存在しなければ片方の出力のみコールバック処理を停止します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import json

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output

gapminder = px.data.gapminder()   # データの読み込み
gapminder2007 = gapminder[gapminder['year'] == 2007]

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1('Gapminder Graph'),
        # 散布図
        dcc.Graph(
            id='graph1',
            figure=px.scatter(
                gapminder2007, x='gdpPercap', y='lifeExp', hover_name='country'
            )
        ),
        # ホバーデータを表示するコンポーネント
        html.P(id='hover_text1', style={'fontSize':'40', 'textAlign':'center', 'backgroundColor':'#CCFFFF'}),
        html.P(id='hover_text2', style={'fontSize':'40', 'textAlign':'center', 'backgroundColor':'#FFD5EC'})
    ],
    style={'width':'90%', 'fontSize':'40', 'textAlign':'center'}
)


# コールバック
@app.callback(
    Output('hover_text1', 'children'),  # データ状態に関係なくコールバック実行
    Output('hover_text2', 'children'),  # Noneであればコールバックを停止
    Input('graph1', 'hoverData')
)
def show_text1(text):
    if text is None:
        return json.dumps(text), dash.no_update
    return json.dumps(text), json.dumps(text)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバック関数ではInputのhoverData属性が値をもたなければ、no_updateクラスを使って部分的にコールバックを停止しています。（40行目）

[ブラウザで表示]

画面をロードした直後は、１つめのPコンポーネントには‘null’が表示されていますが、２つめのPコンポーネントには何も表示されていません。（ホバーデータがないのでコールバック処理が部分的に停止されたため）

グラフ上のデータをマウスオバーすると、両方のPコンポーネントに同じデータが表示されます。（ホバーデータがありコールバック処理が停止されなかったため）