Einzelne Pixel auf der Plotly-Heatmap auswählen/anheften

Question

Bei Plotly-Heatmaps ist es manchmal nützlich, zwei Auswahlmodi zu haben:

• Rechteckige Auswahl (bereits in der Modbar verfügbar)

• Einzelne Pixel auswählen/korrigieren: Ich versuche dies zu erreichen, indem ich eine vorhandene Schaltfläche zum Zeichnen eines Kreises wiederverwende, die ich nicht benötige. Wenn Sie darauf klicken, sollte das Pixel hervorgehoben werden oder eine farbige Scheibe (oder ein roter „Pin“ wie bei der Google Maps-Benutzeroberfläche) darüber angezeigt werden.

Problem: Wenn das Tool drawcircle in der Modbar ausgewählt wird, wird das Ereignis plotly_click nicht ausgelöst (daher können wir die Koordinaten nicht abrufen) und

code>plotly_selected Es wird keine anfängliche Mausklickposition angegeben. (Ich möchte keinen echten Kreis erstellen, sondern nur den ersten Klick verwenden). Siehe auch Event-Handler in JavaScript

const z = Array.from({
  Länge: 50
}, () => Array.from({
  Länge: 50
}, () => Math.floor(Math.random() * 255)));
const plot = document.querySelector("#plot");
const data = [{
  Typ: 'Heatmap',
  z: z
}];
const-Layout = {
  'yaxis': {
    'scaleanchor': 'x'
  }
};
const config = {
  modeBarButtons: [
    ["zoom2d"],
    ["zoomIn2d"],
    ["zoomOut2d"],
    ["autoScale2d"],
    ["select2d"],
    ["Zeichnungskreis"]
  ],
  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>

Wie verwende ich das Modusleistenwerkzeug „Pixel/Punkte auswählen/korrigieren“ auf einer Plotly-Heatmap?

Hinweis: Die Python-Dokumentation ist vollständiger als die JS-Version: Modalleistenschaltflächen hinzufügen/entfernen

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>