如何在Python的Plotly Express树形图中实现点击弹窗并禁用缩放

一、彻底禁用点击缩放行为 #

Plotly树形图默认点击节点会触发缩放，仅设置staticPlot=True等全局参数可能不生效，需结合轨迹级配置：

• 先通过update_layout关闭全局交互：

  fig.update_layout(
      dragmode=False,
      scrollZoom=False,
      staticPlot=True
  )
  

• 再针对树形图轨迹，禁用自身的点击缩放逻辑：

  fig.update_traces(
      hoverinfo='none',  # 不需要悬停可先关闭
      customdata=df[['字段1', '字段2']],  # 预存弹窗要展示的数据
      hovertemplate=None,
      selector=dict(type='treemap')
  )
  

二、实现点击弹窗功能（自定义JavaScript） #

Plotly导出的HTML可嵌入自定义JS，通过监听点击事件实现弹窗：

1. 先导出基础HTML：

   import plotly.express as px
   df = px.data.tips()
   fig = px.treemap(df, path=['day', 'time', 'sex'], values='total_bill')
   
   # 先执行上述禁用缩放的配置
   fig.update_layout(dragmode=False, scrollZoom=False, staticPlot=True)
   fig.update_traces(customdata=df[['total_bill', 'tip']], hoverinfo='none')
   
   # 导出HTML，使用CDN加载Plotly.js
   fig.write_html('treemap.html', include_plotlyjs='cdn')
   

2. 打开导出的HTML，在<body>末尾添加JS代码：

   <script>
   // 获取图表容器
   const chartDiv = document.querySelector('.plotly-graph-div');
   // 监听点击事件
   Plotly.addListener(chartDiv, 'plotly_click', function(data) {
       // 阻止默认缩放行为
       event.preventDefault();
       // 获取预存的自定义数据
       const nodeData = data.points[0].customdata;
       // 原生弹窗示例，也可替换为自定义模态框
       alert(`消费总额: ${nodeData[0]}\n小费: ${nodeData[1]}`);
   });
   </script>
   

三、移动端适配说明 #

• plotly_click事件对移动端触摸点击同样生效，无需额外适配。
• 若要优化弹窗样式，可替换原生alert为自定义HTML模态框，适配移动端屏幕尺寸。

关键提示 #

• customdata需传入弹窗所需的完整数据，确保点击时能获取对应节点信息。
• 用document.querySelector('.plotly-graph-div')获取图表容器比固定ID更稳妥，避免Plotly生成的ID变动。

内容的提问来源于stack exchange，提问作者Ravi P