如何将 Dash 回调装饰器适当地应用于包含选择的 Plotly figurewidget

Question

我正在尝试使用找到的具有多个图表元素的交互式小部件 here 并将其应用到 Dash 中，以便我可以刷多图表：

我在破折号中正确显示了小部件，我可以使用套索进行选择，这会重新为点着色，但不会更新 Sankey。我搜索并发现这可能是一个 "callback" 问题，但其中 none 似乎解决了这个特定问题。有人可以解释一下我错过了什么吗？

剧情：

def chart1():
    cars_df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv')

    # Build parcats dimensions
    categorical_dimensions = ['body-style', 'drive-wheels', 'fuel-type'];

    dimensions = [dict(values=cars_df[label], label=label) for label in categorical_dimensions]

    # Build colorscale
    color = np.zeros(len(cars_df), dtype='uint8')
    colorscale = [[0, '#167b7e'], [1, '#4b3268']]

    # Build figure as FigureWidget
    fig = go.FigureWidget(
        data=[

        go.Scatter(x=cars_df.horsepower, y=cars_df['highway-mpg'],
            marker={'color': 'gray'}, mode='markers', selected={'marker': {'color': 'firebrick'}},
            unselected={'marker': {'opacity': 0.4}}), 

        go.Parcats(
            domain={'y': [0, 0.4]}, dimensions=dimensions,
            line={'colorscale': colorscale, 'cmin': 0,
                'cmax': 1, 'color': color, 'shape': 'hspline'})
        ])

    fig.update_layout(
            height=800, 
            xaxis={'title': 'Horsepower'},
            yaxis={'title': 'MPG', 'domain': [0.6, 1]},
            dragmode='lasso', 
            hovermode='closest',
            # plot_bgcolor='rgba(0, 0, 0, 0)',
            paper_bgcolor='rgba(0, 0, 0, 0)',
            autosize=False,
            bargap=0.35,
            font={"family": "Questrial", "size": 10})

    # Update color callback

    # @app.callback(Output("bigchart", "children"), [Input("points.point_inds", "value")])   <--- an attempt
    def update_color(trace, points, state):
        # Update scatter selection
        fig.data[0].selectedpoints = points.point_inds

        # Update parcats colors
        new_color = np.zeros(len(cars_df), dtype='uint8')
        new_color[points.point_inds] = 1
        fig.data[1].line.color = new_color

    # Register callback on scatter selection...
    fig.data[0].on_selection(update_color)
    # and parcats click
    fig.data[1].on_click(update_color)

    return fig

剧情地点：

dcc.Graph(id="bigchart",figure=chart1())

Plot

抱歉，我会 post 内联图像，但没有代表。谢谢。

Answer 1

如果你想在 Dash 中实现交互，你应该将所有回调转换为 Dash 语法。这是您的示例在 Dash 中的一种可能实现方式，

import dash
import numpy as np
import pandas as pd
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output, State

cars_df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv')
# Build parcats dimensions
categorical_dimensions = ['body-style', 'drive-wheels', 'fuel-type']
dimensions = [dict(values=cars_df[label], label=label) for label in categorical_dimensions]
# Build colorscale.
color = np.zeros(len(cars_df), dtype='uint8')
colorscale = [[0, '#167b7e'], [1, '#4b3268']]


def build_figure():
    fig = go.Figure(
        data=[
            go.Scatter(x=cars_df.horsepower, y=cars_df['highway-mpg'],
                       marker={'color': 'gray'}, mode='markers', selected={'marker': {'color': 'firebrick'}},
                       unselected={'marker': {'opacity': 0.4}}),
            go.Parcats(
                domain={'y': [0, 0.4]}, dimensions=dimensions,
                line={'colorscale': colorscale, 'cmin': 0,
                      'cmax': 1, 'color': color, 'shape': 'hspline'})
        ])
    fig.update_layout(
        height=800,
        xaxis={'title': 'Horsepower'},
        yaxis={'title': 'MPG', 'domain': [0.6, 1]},
        dragmode='lasso',
        hovermode='closest',
        # plot_bgcolor='rgba(0, 0, 0, 0)',
        paper_bgcolor='rgba(0, 0, 0, 0)',
        autosize=False,
        bargap=0.35,
        font={"family": "Questrial", "size": 10})
    return fig


app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div([dcc.Graph(figure=build_figure(), id="graph")])


@app.callback(Output("graph", "figure"), [Input("graph", "selectedData"), Input("graph", "clickData")],
              [State("graph", "figure")])
def update_color(selectedData, clickData, fig):
    selection = None
    # Update selection based on which event triggered the update.
    trigger = dash.callback_context.triggered[0]["prop_id"]
    if trigger == 'graph.clickData':
        selection = [point["pointNumber"] for point in clickData["points"]]
    if trigger == 'graph.selectedData':
        selection = [point["pointIndex"] for point in selectedData["points"]]
    # Update scatter selection
    fig["data"][0]["selectedpoints"] = selection
    # Update parcats colors
    new_color = np.zeros(len(cars_df), dtype='uint8')
    new_color[selection] = 1
    fig["data"][1]["line"]["color"] = new_color
    return fig


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

如何将 Dash 回调装饰器适当地应用于包含选择的 Plotly figurewidget

How to apply a Dash callback decorator appropriately to a Plotly figurewidget that includes a selection

plotly

plotly-dash

plotly-python