如何在Dash应用程序内的Plotly图形对象中单击时更新标记的颜色?

时间:2020-10-16 03:12:09

标签: python plotly plotly-dash

我有一个代码,可以创建绘制成网格的Plotly图,以使网格上的每个(x,y)正方形都充满标记。我希望单击标记时可以更改标记的颜色。我尝试在此处使用代码:https://plotly.com/python/click-events/作为示例,但是当我运行Dash应用程序时,该图形不可单击(除Plotly中的标准交互式工具外)。 我的图的代码是这样。

def create_interactive_grid(n):
    x = []
    y = []
    for i in range(n):
        for j in range(n):
            xvalue, yvalue = i, j
            x.append(xvalue + 0.5)
            y.append(yvalue + 0.5)

    fig = go.Figure()
    scatter = go.Scatter(x=x, y=y, marker=dict(size=30, symbol=1, color="blue"), line=dict(width=0),
                         mode='markers')
    fig.add_trace(scatter)

    fig.update_layout(hovermode="closest", clickmode="event", plot_bgcolor="white", width=1000, height=1000,
                      showlegend=False)
    fig.update_yaxes(showgrid=True, gridwidth=1, gridcolor="black", tickvals=[x for x in range(n)],
                     range=[0, n], scaleanchor="x", constrain="domain", showticklabels = False, ticks = "")
    fig.update_xaxes(showgrid=True, gridwidth=1, gridcolor="black", tickvals=[x for x in range(n)],
                     range=[0, n], constrain="domain", scaleanchor="y", showticklabels = False, ticks= "")

    def update_cell(trace, points, selector):
        # take in click
        # change color of marker on visible graph
        c = list(scatter.marker.color)
        for point in points.point_inds:
            c[point] = "black"
            with fig.batch_update():
                scatter.marker.color = c

    scatter.on_click(update_cell)
    return fig

其他一些教程表明我需要为此使用回调,但是我不确定如何在多页面应用程序中实现该回调,因为此功能与我的应用程序/文件不在同一个文件中运行脚本或我的页面。

1 个答案:

答案 0 :(得分:0)

这是js代码,您可以将其转移到python中:

updatePlotColor() {
    let update = {'marker.color': this.color};
    PlotlyModule.plotlyjs.restyle("plotDiv", update, 1);
}

其中“ 1”是跟踪数(如果只有一个跟踪,请将1更改为0。