Dash 仪表板可以通过链接的刷/交叉过滤动态“生成”吗？

Question

我在 Plotly 论坛上问过这个问题，但很遗憾没有得到答案，也许我在这里运气会更好？

我只是快速浏览了 Dash 的教程，所以在我准备好提交 Dash 以实现目标之前，我需要一些确认。所以基本上我研究了一个使用 Plotly Python 绘制特定常见图形的工具。所以现在我必须开发一个仪表板功能，我可以在其中显示所有这些图表以及交叉过滤/链接刷，即基本上在一个图表中选择一个点也会在可能的情况下突出显示其他可视化中的相同数据点。此外，只有一个数据框，因此也更简单。

现在我的问题很简单；是否可以使用 Dash Python 实现这一目标？

在教程中，Dash 似乎更适合静态仪表板，您已经知道要如何布局仪表板。有什么技巧可以用来实现这一目标吗？因为我只需要支持 15 种可视化类型，所以也欢迎某种“黑客”。我不必做任何详细的事情，比如保存/加载旧图表。更像是我有这个列表：

line_chart: col1, col2
bar_chart: col2, col3
scatterplot: col1, col2, col3

我会在 Dash 中从头开始制作新图表，使用链接的刷/交叉过滤或其他任何名称，但基本上只是“选择一个，反映在其他图表中”。如果是这样，任何有用的链接也将不胜感激，或者只是关于我如何实现这一目标的一般方向。

提前致谢！

Answer 1

这个网站可能会有所帮助：Using CrossFiltering in Plotly

为了简要介绍本次讨论的内容，帮助解决问题的代码如下所示：

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import pandas as pd
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# make a sample data frame with 6 columns
np.random.seed(0)
df = pd.DataFrame({"Col " + str(i+1): np.random.rand(30) for i in range(6)})

total_clicks = 0 # keep track of total clicks

app.layout = html.Div([
    html.Button('Reset selections', id='reset'), # add a button
    html.Div(
        dcc.Graph(id='g1', config={'displayModeBar': False}),
        className='four columns'
    ),
    html.Div(
        dcc.Graph(id='g2', config={'displayModeBar': False}),
        className='four columns'
        ),
    html.Div(
        dcc.Graph(id='g3', config={'displayModeBar': False}),
        className='four columns'
    )
], className='row')

def get_figure(df, x_col, y_col, selectedpoints, selectedpoints_local):

    if selectedpoints_local and selectedpoints_local['range']:
        ranges = selectedpoints_local['range']
        selection_bounds = {'x0': ranges['x'][0], 'x1': ranges['x'][1],
                            'y0': ranges['y'][0], 'y1': ranges['y'][1]}
    else:
        selection_bounds = {'x0': np.min(df[x_col]), 'x1': np.max(df[x_col]),
                            'y0': np.min(df[y_col]), 'y1': np.max(df[y_col])}

    # set which points are selected with the `selectedpoints` property
    # and style those points with the `selected` and `unselected`
    # attribute. see
    # https://medium.com/@plotlygraphs/notes-from-the-latest-plotly-js-release-b035a5b43e21
    # for an explanation
    return {
        'data': [{
            'x': df[x_col],
            'y': df[y_col],
            'text': df.index,
            'textposition': 'top',
            'selectedpoints': selectedpoints,
            'customdata': df.index,
            'type': 'scatter',
            'mode': 'markers+text',
            'marker': { 'color': 'rgba(0, 116, 217, 0.7)', 'size': 12 },
            'unselected': {
                'marker': { 'opacity': 0.3 },
                # make text transparent when not selected
                'textfont': { 'color': 'rgba(0, 0, 0, 0)' }
            }
        }],
        'layout': {
            'margin': {'l': 20, 'r': 0, 'b': 15, 't': 5},
            'dragmode': 'select',
            'hovermode': False,
            # Display a rectangle to highlight the previously selected region
            'shapes': [dict({
                'type': 'rect',
                'line': { 'width': 1, 'dash': 'dot', 'color': 'darkgrey' }
            }, **selection_bounds
            )]
        }
    }