在 Plotly 熱圖上選擇/固定單一像素

Question

在 Plotly 熱圖上，有時有 2 種選擇模式很有用：

• 矩形選擇（已在 modbar 中提供）

• 選擇/固定單一像素：我試圖透過回收我不需要的現有「drawcircle」按鈕來實現這一點。單擊時，像素應突出顯示，或其頂部有一個彩色圓盤（或紅色“圖釘”，如 Google 地圖 UI）

問題：當在modbar 中選擇drawcircle 工具時，plotly_click 事件不會觸發（因此我們無法取得座標），且plotplotly_| 沒有給出初始的滑鼠點擊位置。 （我不想製作真正的圓形，我只想使用第一次點擊）。另請參閱 JavaScript 中的事件處理程序

const z = Array.from({
  length: 50
}, () => Array.from({
  length: 50
}, () => Math.floor(Math.random() * 255)));
const plot = document.querySelector("#plot");
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_selected", (data) => {
  console.log(data);
});
plot.on('plotly_click', (data) => {
  console.log(data);
});

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

如何在 Plotly 熱圖上使用「選擇/固定像素/點」模式列工具？

注意：Python 文件比 JS 版本更完整：新增/移除模式列按鈕

Answer 1

研究了您的範例，我發現您的 console.log 沒有提供預期的數據，因為 data 是循環的。但是，由於 data.points 具有單一元素，因此您可以透過 data.points[0].x、data.points[0] 來取得座標。分別為 y 和 data.points[0].z。

const z = Array.from({
  length: 50
}, () => Array.from({
  length: 50
}, () => Math.floor(Math.random() * 255)));
const plot = document.querySelector("#plot");
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_selected", (data) => {
  console.log(data);
});
plot.on('plotly_click', function(data) {
  console.log({x: data.points[0].x, y: data.points[0].y, z: data.points[0].z});
});

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