如何在Plotly热力图中实现单个像素选择/钉选的模式栏工具？

你遇到的核心问题是drawcircle工具会拦截plotly_click事件，且plotly_selected返回的是圈选区域而非初始点击坐标。要实现单像素钉选，得绕开原生drawcircle的事件逻辑，直接监听底层鼠标事件并结合Plotly的坐标转换来实现。

解决方案步骤 #

1. 跟踪当前激活的模式栏工具，判断是否处于"钉选模式"（即drawcircle被选中）
2. 在画布上监听mousedown事件，当处于钉选模式时，阻止默认的圆形绘制行为
3. 将鼠标点击的屏幕坐标转换为热力图的像素索引（行/列）
4. 在对应位置添加自定义标记（比如红色图钉）

完整代码实现 #

HTML部分

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="plot"></div>

JavaScript部分

// 生成随机热力图数据
const z = Array.from({ length: 50 }, () => 
  Array.from({ length: 50 }, () => Math.floor(Math.random() * 255))
);
const plot = document.querySelector("#plot");
let isPinModeActive = false;
let pinTraceIndex = null; // 存储钉选标记的trace索引

// 初始化热力图
const data = [{
  type: 'heatmap',
  z: z
}];
const layout = {
  yaxis: { scaleanchor: 'x' }
};
const config = {
  modeBarButtons: [
    ["zoom2d"], ["zoomIn2d"], ["zoomOut2d"], ["autoScale2d"], ["select2d"], ["drawcircle"]
  ],
  displaylogo: false,
  displayModeBar: true
};
Plotly.newPlot('plot', data, layout, config);

// 监听模式栏工具切换，判断是否激活钉选模式
plot.on('plotly_relayout', (eventData) => {
  const isDrawCircleActive = Object.keys(eventData).some(key => 
    key.includes('dragmode') && eventData[key] === 'drawcircle'
  );
  isPinModeActive = isDrawCircleActive;
});

// 监听画布鼠标按下事件
plot.addEventListener('mousedown', (e) => {
  if (!isPinModeActive) return;

  // 阻止默认的圆形绘制行为
  e.preventDefault();

  // 获取Plotly的d3实例和画布元素
  const d3 = Plotly.d3;
  const plotDiv = d3.select(plot);
  const svg = plotDiv.select('svg');
  const plotArea = svg.select('.plot-container');

  // 获取鼠标在画布内的坐标
  const mouseCoords = d3.mouse(plotArea.node());
  
  // 获取热力图的x、y轴比例尺，用于转换坐标
  const xScale = Plotly.d3.scaleLinear().domain(plot.layout.xaxis.range).range(plot.layout.xaxis.domain);
  const yScale = Plotly.d3.scaleLinear().domain(plot.layout.yaxis.range).range(plot.layout.yaxis.domain);

  // 转换为热力图的像素索引（取整得到对应的行/列）
  const xIndex = Math.round(xScale(mouseCoords[0]));
  const yIndex = Math.round(yScale(mouseCoords[1]));

  // 确保索引在热力图范围内
  if (xIndex < 0 || xIndex >= z[0].length || yIndex < 0 || yIndex >= z.length) return;

  // 定义钉选标记的样式（红色图钉效果）
  const pinTrace = {
    type: 'scatter',
    x: [xIndex],
    y: [yIndex],
    mode: 'markers',
    marker: {
      size: 12,
      color: '#ff0000',
      symbol: 'circle',
      line: { width: 2, color: '#ffffff' }
    },
    showlegend: false,
    hoverinfo: 'skip'
  };

  // 更新或添加钉选标记
  if (pinTraceIndex !== null) {
    Plotly.update(plot, {
      x: [[xIndex]],
      y: [[yIndex]]
    }, {}, [pinTraceIndex]);
  } else {
    Plotly.addTraces(plot, pinTrace);
    pinTraceIndex = plot.data.length - 1;
  }
});

代码说明 #

• 模式栏跟踪：通过plotly_relayout事件监听dragmode变化，判断是否激活了drawcircle工具（即钉选模式）
• 鼠标事件拦截：在mousedown时阻止默认行为，避免Plotly绘制圆形
• 坐标转换：利用Plotly内置的d3比例尺，将屏幕坐标反转转换为热力图的像素索引
• 钉选标记：用散点图的红色圆形标记模拟图钉，支持更新已有标记位置

这样就能复用drawcircle按钮作为单像素钉选工具，点击热力图任意像素时会在对应位置添加红色图钉，且不会触发原生的圆形绘制行为。

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