Dash㉘（マウス動作　ドラッグ操作）

ドラッグ操作

selectedData属性では、ドラッグ操作で複数要素を選択することもできます。

scatter関数の引数templateのdragmode属性に‘select’を設定し、複数要素選択に設定します。（デフォルトでは‘zoom’となっています。）

レイアウトにGraphコンポーネントを２つ設定して、ドラッグして選択した複数の要素を２種類の折れ線グラフに反映します。

[ソースコード]

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
45
46
47
48
49
50
51
52
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',
                template={'layout':{'dragmode':'select'}} # ドラッグモードをselectにする
            )
        ),
        html.Div(
            [
                dcc.Graph(id='graph2', className='six columns'),
                dcc.Graph(id='graph3', className='six columns')
            ]
        )
    ],
    style={'width':'90%', 'fontSize':'40', 'textAlign':'center'}
)


# コールバック
@app.callback(
    Output('graph2', 'figure'),
    Output('graph3', 'figure'),
    Input('graph1', 'selectedData')   # GraphのselectedData属性を指定
)
def show_text(selectedData):
    if selectedData:
        selected_countries = [data['hovertext'] for data in selectedData['points']]
        selected_df = gapminder[gapminder['country'].isin(selected_countries)]
        fig2 = px.line(selected_df, x='year', y='pop', color='country', title='各国の人口')
        fig3 = px.line(selected_df, x='year', y='lifeExp', color='country', title='各国の平均寿命')
        return fig2, fig3
    raise dash.exceptions.PreventUpdate

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

コールバック関数では、ドラッグで選択された複数の国を抽出し、その国の人口と平均寿命を折れ線グラフに描画しています。

[ブラウザで表示]

散布図上でドラッグし複数要素を選択すると、その要素をもとに下側の折れ線グラフが描画されることが確認できます。