在 Plotly 热图上选择/固定单个像素

Question

在 Plotly 热图上，有时有 2 种选择模式很有用：

• 矩形选择（已在 modbar 中提供）

• 选择/固定单个像素：我试图通过回收我不需要的现有“drawcircle”按钮来做到这一点。单击时，像素应该突出显示，或者在其顶部有一个彩色圆盘（或一个红色“图钉”，如 Google 地图 UI）

问题：当在 modbar 中选择

drawcircle

工具时，

plotly_click

事件不会被触发（因此我们无法获取坐标），并且

plotly_selected

没有给出初始鼠标单击位置。 （我不想制作真正的圆形，我只想使用第一次单击）。另请参阅 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>