Pilih/pin piksel individu pada peta haba Plotly

Question

Pada peta haba Plotly, kadangkala berguna untuk mempunyai 2 mod pemilihan:

• Pilihan segi empat tepat (sudah tersedia dalam modbar)

• Pilih/betulkan piksel individu: Saya cuba mencapai ini dengan mengitar semula butang "bulatan lukis" sedia ada yang saya tidak perlukan. Apabila diklik, piksel harus menyerlahkan atau mempunyai cakera berwarna (atau "pin" merah seperti UI Peta Google) di atasnya

Masalah: Apabila alat drawcircle dipilih dalam modbar, plotly_click code>plotly_selected Tiada kedudukan klik tetikus awal diberikan. (Saya tidak mahu membuat bulatan yang benar, saya hanya mahu menggunakan klik pertama). Lihat juga Pengendali acara dalam JavaScript

const z = Array.from({
  panjang: 50
}, () =>
  panjang: 50
}, () => Math.floor(Math.random() * 255)));
plot const = document.querySelector("#plot");
data const = [{
  jenis: 'peta haba',
  z: z
}];
susun atur const = {
  'yaxis': {
    'scaleanchor': 'x'
  }
};
konfigurasi const = {
  modBarButtons: [
    ["zum2d"],
    ["zoomIn2d"],
    ["zoomOut2d"],
    ["autoScale2d"],
    ["select2d"],
    ["bulatan lukis"]
  ],
  displaylogo: palsu,
  displayModeBar: benar
};
Plotly.newPlot('plot', data, susun atur, konfigurasi);

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>

Bagaimanakah cara saya menggunakan alat bar mod Pilih/Betulkan Piksel/Titik pada peta haba Plotly?

Nota: Dokumentasi Python lebih lengkap daripada versi JS: Tambah/Alih Keluar Butang Bar Modal

Answer 1

Mengkaji contoh anda, saya dapati contoh anda 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>