一、Dash应用程序布局

Dash是声明式的, 通过关键字描述组件, 我们通过对dash.layout传值来设置Dash应用的布局样式, 一个组件的层次树, 官方提供了很多开源组件库, 通过这些组件, 我们可以轻松地布局我们的应用程序, 当然我们也可以自己通过HTML、JavaScript、CSS封装组件, 下面我们来介绍一些官方提供的组件:

1.Dash HTML Components: 提供了所有的HTML标签和关键字参数, 用来设置HTML的属性；

2.Dash Core Components: 提供了很多高级的组件, 例如交互式高阶组件库，是由JavaScript、HTML和CSS编写，并由React.js库生成，其语法类似Plotly；

3.Dash DataTable: 一个交互表组件，设计用于查看、编辑和探索大型数据集；

4.Dash Bio: 一套生物信息学组件，可以更简单地分析和可视化生物信息学数据，并在Dash应用程序中与它们交互；

5.Dash DAQ: 包含一组健壮的控件，使它更简单地将数据采集和控件集成到Dash应用程序中；

6.Dash Image Annotations: 该组件提供了如何在绘图时使用不同的绘图工具注释图像，以及如何在Dash应用程序中使用这些注释；

7.Dash Canvas: 使用Dash进行图像注释和图像处理的模，提供了用于在图像上绘图和注释的DashCanvas对象，以及一组使用注释处理图像的实用函数，Dash Canvas可用于需要用户与图像交互的各个领域，如工业中的质量控制、生命和医学科学中细胞或器官的识别和分割、材料和地球科学中的阶段量化、机器学习训练集的构建等；

8.Dash Slicer: 提供了一种通过一维切片来可视化3D图像数据的简单方法。可以链接同一数据的多个视图，以帮助导航。还支持蒙版叠加；

9.Dash Cytoscape: 一个图形可视化组件，用于创建易于定制的、高性能的、交互式的和基于web的网络。它扩展和渲染Cytoscape.js，并提供与Dash布局和回调的深度集成，使强大的网络能够与Dash组件的丰富集合结合，以及已建立的计算生物学和网络科学库；

10.Dash VTK: Dash VTK旨在将VTK/vtk.js可视化集成到Dash框架中；

11.Dash Bootstrap Components: 是Plotly Dash的Bootstrap组件库，它使构建具有复杂、响应式布局的风格一致的应用变得更容易；

二、Dash中的回调函数

Dash回调函数的理解：当一个输入组件的属性发生变化时，Dash会自动调用这些函数，以更新另一个组件(输出组件)的某些属性，以下是一个简单的例子：

 from dash import Dash, dcc, html, Input, Output
 app = Dash(__name__)
 app.layout = html.Div([
     html.H6("更改文本框中的值以查看回调的作用!"),
     html.Div([
         "输入: ",
         dcc.Input(id='my-input', value='初始化值', type='text')
     ]),
     html.Br(),
     html.Div(id='my-output'),
 
 ])
 @app.callback(
     Output(component_id='my-output', component_property='children'),
     Input(component_id='my-input', component_property='value')
 )
 def update_output_div(input_value):
     return f'输出: {input_value}'
 
 if __name__ == '__main__':
     app.run_server(debug=True)

三、Dash的交互式信息可视化

Dash核心组件模块包含一个名为dcc.Graph的图形组件，Graph使用开源的plotly.js JavaScript图形库呈现交互式数据可视化。

plotly.js支持超过35种图表类型，并以矢量质量的SVG和高性能的WebGL呈现图表；

dcc.Graph组件都可以通过用户交互更改的属性，当将鼠标悬停在点上、单击点或选择图中点的区域时，这些属性会更新，属性中的任何一个都可以通过回调函数更新；

四、Dash在回调函数之间共享数据

Dash的核心原则之一，即Dash回调决不能在其作用域之外修改变量，修改任何全局变量都是不安全的，本节提供了一些在回调之间共享状态的替代模式。

使用dcc.Store将共享数据存储在浏览器中，具体用法我们后续再介绍；
提前计算并聚合数据，在许多情况下，你的应用程序将只显示处理数据的子集或聚合。在这些情况下，可以在数据处理回调中预计算聚合，并将这些聚合传输到剩余的回调中；
缓存和信号，这种方案我们后续做实际应用时再介绍；
服务器上基于用户的会话数据，这种方案我们后续做实际应用时再介绍；