Python Plotly Dash中Sunburst图表更新后从指定根节点层级渲染

核心原理 #

Plotly 的 Sunburst 组件原生支持 level 配置项，该参数接收节点ID作为值，指定图表渲染时默认展开到的目标节点层级。你只需持久化存储用户上次点击的节点ID，图表重建时将该ID传入level即可实现需求，无需模拟点击操作。

具体修改步骤 #

• 新增dcc.Store组件存储选中的节点ID，用于跨回调持久化数据
  在你的app.layout中添加如下代码：

  dcc.Store(id='selected_node_id', data='test') # data默认值为你的旭日图源节点ID，示例中源节点ID为test
  

• 修改点击事件回调，同步存储用户选中的节点ID
  给原display_click_data回调新增一个输出项，返回计算得到的click_path到dcc.Store：

  @app.callback(
      Output('click-data', 'children'),
      Output('title', 'children'),
      Output('selected_node_id', 'data'), # 新增输出到Store
      Input('sunburst', 'clickData'))
  def display_click_data(clickData):
      click_path = "test"
      if clickData:
          click_path = clickData["points"][0]["id"]
          percentEntry = (clickData["points"][0]).get("percentEntry")
          parent = (clickData["points"][0]).get("parent")
          if percentEntry == 1 and parent == "test":
              click_path = "test"
      title = f"Selected from Sunburst Chart: {' '.join(click_path)}"
      return json.dumps(clickData, indent=2), title, click_path # 新增返回click_path
  

• 修改图表更新回调，读取存储的节点ID传入Sunburst配置
  给update_graph回调新增selected_node_id作为输入，构建Sunburst时添加level参数：

  @app.callback(
      Output('sunburst', 'figure'),
      Input('show_tb', 'value'),
      Input('selected_node_id', 'data') # 新增输入读取存储的节点ID
  )
  def update_graph(show_tb_input, selected_node_id): # 新增入参
      global focus_cm, show_tb, tp_dict
      
      if show_tb_input == "True":
          show_tb = True
      else:
          show_tb =False
  
      tp_dict = {"bsp": C_BSP, "wm": C_WM}  
      colors = set_colors_for_sunburst(namedict)
      fig = go.Figure(go.Sunburst(
          ids=data_sunburst.index,
          labels=data_sunburst.name,
          parents=data_sunburst.parent_key,
          values=data_sunburst.weight,
          branchvalues="total",  
          marker=dict(colors=colors),
          insidetextorientation="auto", 
          level=selected_node_id # 新增level参数指定默认展示层级
      ))
      fig.update_layout(
          grid=dict(columns=2, rows=1),
          margin=dict(t=0, l=0, r=0, b=0))
      return fig
  

注意事项 #

如果你的旭日图数据结构会发生变化，可能出现存储的节点ID在新数据中不存在的情况，可以在构建图表前增加一层判断，若ID不存在则降级到根节点ID即可。

内容的提问来源于stack exchange，提问作者Helge Müller