dash callbacks

The dash_html_components library provides classes for all of the HTML tags, and the keyword arguments describe the HTML attributes like style, className, and id.

The dash_core_components library generates higher-level components like controls and graphs.

• dash_html_components提供的是HTML標(biāo)簽的各種類以及用于描述HTML屬性寄雀，比如style、className婿禽、id 等的各種關(guān)鍵參數(shù)
• dash_core_components提供的是能夠用于控制和作圖的高級組件

第一個demo

代碼示例

在使用回調(diào)函數(shù)的時候需要引入一個模塊：

from dash.dependencies import Input, Output

image.png

image.png

代碼解釋
The “inputs” and “outputs” of our application interface are described declaratively through the app.callback decorator.

• 應(yīng)用的中input和output接口通過回調(diào)裝飾器來實(shí)現(xiàn)

In Dash, the inputs and outputs of our application are simply the properties of a particular component. In this example, our input is the “value” property of the component that has the ID “my-id”. Our output is the “children” property of the component with the ID “my-div”.

• inputs和outputs兩個部分只是特殊組件的屬性寺渗，它們同時擁有value和id兩個屬性值

Whenever an input property changes, the function that the callback decorator wraps will get called automatically. Dash provides the function with the new value of the input property as an input argument and Dash updates the property of the output component with whatever was returned by the function.

• 只要輸入input的屬性改變，回調(diào)函數(shù)構(gòu)成的裝飾器會自動改變輸出值

The component_id and component_property keywords are optional (there are only two arguments for each of those objects). I have included them here for clarity but I will omit them from here on out for brevity and readability.

• component_id and component_property這兩個參數(shù)可以省略疼进，直接寫出它們相應(yīng)的值即可

Notice how we don’t set a value for the children property of the my-div component in the layout. When the Dash app starts, it automatically calls all of the callbacks with the initial values of the input components in order to populate the initial state of the output components. In this example, if you specified something like html.Div(id='my-div', children='Hello world'), it would get overwritten when the app starts.

• 上述例子中沒有對children屬性賦值薪缆。Dash應(yīng)用程序啟動時，它將自動使用輸入組件的初始值調(diào)用所有回調(diào)伞广，以填充輸出組件的初始狀態(tài)拣帽。如果將其設(shè)為其他值疼电，原始值將會被覆蓋。

第二個demo

另一個例子：通過dcc.Silder來更新dcc.Graph减拭，將滑動條和圖形相結(jié)合的例子

image.png

image.png

代碼解釋

1. the "value" property of the Slider is the input of the app and the output of the app is the "figure" property of the Graph.

• 指明了應(yīng)用APP的輸入slider和輸出figure

2. Whenever the value of the Slider changes, Dash calls the callback function update_figure with the new value. The function filters the dataframe with this new value, constructs a figure object, and returns it to the Dash application.

• 當(dāng)滑動條改變蔽豺，即輸入改變的時候，dash的回調(diào)函數(shù)也會同時更新拧粪，然后返回給dash應(yīng)用

3. We load our dataframe at the start of the app: df = pd.read_csv('...'). This dataframe df is in the global state of the app and can be read inside the callback functions.

• 在應(yīng)用APP開始的時候就導(dǎo)入了數(shù)據(jù)df修陡；保證了數(shù)據(jù)df是全局性質(zhì)，在任何地方都可以讀取使用既们。

4. The callback does not modify the original data, it just creates copies of the dataframe by filtering through pandas filters. This is important: your callbacks should never mutate variables outside of their scope.

• 不要在回調(diào)函數(shù)內(nèi)部改變原始數(shù)據(jù)濒析，它僅僅是使用pandas來進(jìn)行過濾數(shù)據(jù)，從而來使用其副本啥纸。

5. We are turning on transitions with layout.transition to give an idea of how the dataset evolves with time: transitions allow the chart to update from one state to the next smoothly, as if it were animated.

• 開啟了trasnsition屬性号杏，能夠看到數(shù)據(jù)集隨時間的變化情況。

可視化效果

image.png