<p>Bei Plotly-Heatmaps ist es manchmal nützlich, zwei Auswahlmodi zu haben: </p> <ul> <li><p>Rechteckige Auswahl (bereits in der Modbar verfügbar)</p> </li> <li><p><strong>Einzelne Pixel auswählen/korrigieren</strong>: 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. </p> </li> </ul> <p>Problem: Wenn das Tool <code>drawcircle</code> in der Modbar ausgewählt wird, wird das Ereignis <code>plotly_click</code> nicht ausgelöst (daher können wir die Koordinaten nicht abrufen) und <p> code>plotly_selected </code> 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</p> <p> <pre class="brush:js;toolbar:false;">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); });</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <div id="plot"></div></pre> </p> <p><strong>Wie verwende ich das Modusleistenwerkzeug „Pixel/Punkte auswählen/korrigieren“ auf einer Plotly-Heatmap? </strong></p> <p>Hinweis: Die Python-Dokumentation ist vollständiger als die JS-Version: Modalleistenschaltflächen hinzufügen/entfernen</p>

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>