【译Py】Python交互式数据分析报告框架~Dash介绍
【译Py】Dash用户指南01-02_安装与应用布局
【译Py】Dash用户指南03_交互性简介
【译Py】Dash用户指南04_交互式数据图
【译Py】Dash用户指南05_使用State进行回调

3. 交互性简介

本教程的第一部分介绍了Dash应用布局 ，第二部分将介绍如何实现Dash应用的交互。
下面先看一个例子。

Dash应用的交互式布局

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

app = dash.Dash()

app.css.append_css(
    {"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

app.layout = html.Div([
    dcc.Input(id='my-id', value='初始值', type='text'),
    html.Div(id='my-div')
])

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return '你输入了 "{}"'.format(input_value)

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

007

在文本框中输入文字，输出组件的子项会立即更新。下面说明这个例子后台的每个操作步骤：

1. app.callback装饰器通过声明描述应用界面的“输入”与“输出”项。
2. Dash应用的输入、输出项是指定组件的特性。本例中，输入项是ID名为my-id 组件的value特性。 输出项是ID名为my-div 组件的children特性。
3. Dash提供了输入项特性改变时，能够自动调用callback装饰器打包的函数。输入项特性的值更新后，可以作为输入项参数，然后返回该函数的输入内容。
4. component_id 与 component_property 关键字是可选的，这些对象只有两个参数。本例中为了便于理解，列出了这两个关键字，正常情况下，为了让代码简明、易读，可以省略这两个关键字。
5. 不要混淆dash.dependencies.Input 与dash_core_components.Input对象。前者只在回调函数中使用，后者才是真正的组件。
6. 不要在layout中设置 my-div组件的children特性。Dash应用启动时会自动调用所有回调函数，获取输入组件中的初始值，使之转化为输出组件的初始状态。本例中，如果指定了html.Div(id='my-div', children='Hello world')等内容，应用启动时会被覆盖。

这种方式类似于用Excel编程，单元格的内容发生变化时，所有与该单元格相关的单元格都会自动更新，这就是所谓的“响应式编程”。

请记住如何用关键字参数描述组件，这点非常重要。通过Dash的交互性，可以使用回调函数动态更新这些特性。Dash可以更新组件的children特性从而显示更新的文本，也可以通过dcc.Graph组件的figure特性展示更新的数据，还可以更新组件的style，甚至是dcc.Dropdown组件的options。

下面这个例子通过dcc.Slider更新dcc.Gragh：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/'
    'datasets/master/gapminderDataFiveYear.csv')

app = dash.Dash()

app.css.append_css(
    {"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].min(),
        step=None,
        marks={str(year): str(year) for year in df['year'].unique()}
    )
])

@app.callback(
    dash.dependencies.Output('graph-with-slider', 'figure'),
    [dash.dependencies.Input('year-slider', 'value')])
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]
    traces = []
    for i in filtered_df.continent.unique():
        df_by_continent = filtered_df[filtered_df['continent'] == i]
        traces.append(go.Scatter(
            x=df_by_continent['gdpPercap'],
            y=df_by_continent['lifeExp'],
            text=df_by_continent['country'],
            mode='markers',
            opacity=0.7,
            marker={
                'size': 15,
                'line': {'width': 0.5, 'color': 'white'}
            },
            name=i
        ))

    return {
        'data': traces,
        'layout': go.Layout(
            xaxis={'type': 'log', 'title': '人均GDP'},
            yaxis={'title': '平均寿命', 'range': [20, 90]},
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend={'x': 0, 'y': 1},
            hovermode='closest'
        )
    }

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

008

本例中，Slider的value特性是Dash应用的输入项，输出项是Graph的figure特性。Slider的value变更时，Dash调用update_figure回调函数获取更新值。这个函数会筛选DataFrame生成新的值，创建figure 对象，并将其返回至Dash应用。

以下是本例的核心内容：

1. 使用Pandas导入并筛选内存中的数据集；
2. 应用启动时，加载DataFrame：df = pd.read_csv('...')。在这个Dash应用里，DataFrame df是全局的，可以被回调函数读取。
3. 将数据加载至内存并进行计算的代价很高，所以要在应用启动时载入数据，避免在回调函数中加载数据，确保用户访问或与应用交互时，数据（即df）已经载入至内存。尽量在应用的全局范围内下载或查询数据等大规模数据初始化操作，避免在回调函数里进行这类操作。
4. 回调函数不会修改原始数据，只是通过Pandas的过滤器来筛选数据，并创建DataFrame的副本。这点非常重要：不要在回调函数范围之外更改变量。如果在全局状态下调整回调函数，某一用户的会话就可能影响下一用户的会话，特别是应用部署在多进程或多线程的环境时，这些修改将导致跨会话数据分享出现问题。

多重输入

任一Dash**输出项 都可对应多个输入项 **。下面这个例子为某个输出组件（Graph 组件的figure特性）绑定了5个输入项（2个下拉菜单Dropdown 组件，两个单选按钮RadioItems组件，还有1个滑动条Slider组件）。注意️在第2个参数里，app.callback 是如何在一个列表中列出5个dash.dependenceies.Input输入项的。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash()

app.css.append_css(
    {"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
    
df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/'
    'cb5392c35661370d95f300086accea51/raw/'
    '8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/'
    'indicators.csv')

available_indicators = df['Indicator Name'].unique()

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='xaxis-column',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value='Fertility rate, total (births per woman)'
            ),
            dcc.RadioItems(
                id='xaxis-type',
                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
                value='Linear',
                labelStyle={'display': 'inline-block'}
            )
        ],
        style={'width': '48%', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                id='yaxis-column',
                options=[{'label': i, 'value': i} for i in available_indicators],
                value='Life expectancy at birth, total (years)'
            ),
            dcc.RadioItems(
                id='yaxis-type',
                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
                value='Linear',
                labelStyle={'display': 'inline-block'}
            )
        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
    ]),

    dcc.Graph(id='indicator-graphic'),

    dcc.Slider(
        id='year--slider',
        min=df['Year'].min(),
        max=df['Year'].max(),
        value=df['Year'].max(),
        step=None,
        marks={str(year): str(year) for year in df['Year'].unique()}
    )
])

@app.callback(
    dash.dependencies.Output('indicator-graphic', 'figure'),
    [dash.dependencies.Input('xaxis-column', 'value'),
     dash.dependencies.Input('yaxis-column', 'value'),
     dash.dependencies.Input('xaxis-type', 'value'),
     dash.dependencies.Input('yaxis-type', 'value'),
     dash.dependencies.Input('year--slider', 'value')])
def update_graph(xaxis_column_name, yaxis_column_name,
                 xaxis_type, yaxis_type,
                 year_value):
    dff = df[df['Year'] == year_value]

    return {
        'data': [go.Scatter(
            x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
            y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
            text=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
            mode='markers',
            marker={
                'size': 15,
                'opacity': 0.5,
                'line': {'width': 0.5, 'color': 'white'}
            }
        )],
        'layout': go.Layout(
            xaxis={
                'title': xaxis_column_name,
                'type': 'linear' if xaxis_type == 'Linear' else 'log'
            },
            yaxis={
                'title': yaxis_column_name,
                'type': 'linear' if yaxis_type == 'Linear' else 'log'
            },
            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
            hovermode='closest'
        )
    }

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

009

本例中，Dropdown、Slider、RadioItems这些组件的value特性变化时，就会调用update_graph函数。

update_graph的输入参数就是这些组件Input特性的当前值或更新值，其优先级为它们的指定顺序。

虽然同一时间内，只能修改一个Input特性（比如用户一次只能修改一个下拉菜单的值），但时，Dash会采集所有绑定组件Input 特性的当前值，并通过函数传递给回调函数，确保总能获得该应用当前状态的值。

下面在这个例子的基础上加入多重输出。

多重输出

一个Dash回调函数仅能更新一个输出属性。要想实现多重输出，需要编写多个函数。

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash('')

app.css.append_css(
    {"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

app.layout = html.Div([
    dcc.RadioItems(
        id='dropdown-a',
        options=[{'label': i, 'value': i} for i in ['北京', '天津', '上海']],
        value='北京'
    ),
    html.Div(id='output-a'),

    dcc.RadioItems(
        id='dropdown-b',
        options=[{'label': i, 'value': i} for i in ['东城区', '西城区', '朝阳区']],
        value='朝阳区'
    ),
    html.Div(id='output-b')

])

@app.callback(
    dash.dependencies.Output('output-a', 'children'),
    [dash.dependencies.Input('dropdown-a', 'value')])
def callback_a(dropdown_value):
    return '已选中"{}"'.format(dropdown_value)

@app.callback(
    dash.dependencies.Output('output-b', 'children'),
    [dash.dependencies.Input('dropdown-b', 'value')])
def callback_b(dropdown_value):
    return '已选中"{}"'.format(dropdown_value)

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

010

可以将输入与输出项链在一起：一个回调函数的输出项可以是另一个回调函数的输入项。

这个模式可以用来创建动态UI，一个输入组件可以更新另一个输入组件的可用选项，请看下面的例子。

# -*- coding: utf-8 -*-
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.css.append_css(
    {"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

all_options = {
    '北京': ['东城区', '西城区', '朝阳区'],
    '上海': ['黄浦区', '静安区', '普陀区']
}
app.layout = html.Div([
    dcc.RadioItems(
        id='countries-dropdown',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value='北京'
    ),

    html.Hr(),

    dcc.RadioItems(id='cities-dropdown'),

    html.Hr(),

    html.Div(id='display-selected-values')
])

@app.callback(
    dash.dependencies.Output('cities-dropdown', 'options'),
    [dash.dependencies.Input('countries-dropdown', 'value')])
def set_cities_options(selected_country):
    return [{'label': i, 'value': i} for i in all_options[selected_country]]

@app.callback(
    dash.dependencies.Output('cities-dropdown', 'value'),
    [dash.dependencies.Input('cities-dropdown', 'options')])
def set_cities_value(available_options):
    return available_options[0]['value']

@app.callback(
    dash.dependencies.Output('display-selected-values', 'children'),
    [dash.dependencies.Input('countries-dropdown', 'value'),
     dash.dependencies.Input('cities-dropdown', 'value')])
def set_display_children(selected_country, selected_city):
    return '{}是{}的辖区。'.format(
        selected_city, selected_country,
    )

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

011

第二个单选按钮RadioItems的选项基于第一个回调函数传递的单选按钮RadioItems中选择的值。

第二个回调函数设置了options特性改变时的初始值：它将自身设置为options数组中的第一个值。

最后的回调函数显示了每个组件中的可选值value。如果改变城市单选按钮RadioItems的值value，Dash会等城区单选按钮RadioItems 的值value更新后，再调用最终的回调函数。

小结

本节介绍了Dash回调函数的基本概念。Dash应用是基于下述简单但强大的原则进行构建的：可以通过响应式与函数式的Python回调函数自定义声明式的UI。声明式组件中的每个元素属性都可以通过回调函数和属性子集进行更新，比如dcc.Dropdown的value特性，这样用户就可以在交互界面中进行编辑。

下一章将阐述如何使用上述规则，通过dash_core-componets.Graph组件让Dash应用响应页面上的图形交互功能。

【译Py】Python交互式数据分析报告框架~Dash介绍
【译Py】Dash用户指南01-02_安装与应用布局
【译Py】Dash用户指南03_交互性简介
【译Py】Dash用户指南04_交互式数据图
【译Py】Dash用户指南05_使用State进行回调