Sélectionner/épingler des pixels individuels sur la carte thermique Plotly

Question

Sur les heatmaps Plotly, il est parfois utile d'avoir 2 modes de sélection :

• Sélection rectangulaire (déjà disponible dans modbar)

  ≪/li>

• Sélectionner/corriger des pixels individuels : j'essaie d'y parvenir en recyclant un bouton "drawcircle" existant dont je n'ai pas besoin. Lorsque vous cliquez dessus, le pixel doit être mis en surbrillance ou avoir un disque coloré (ou une "épingle" rouge comme l'interface utilisateur de Google Maps) au-dessus

  ≪/li>

Problème : Lorsque l'outil drawcircle est sélectionné dans la barre de mod, l'événement plotly_click code>plotly_selected Aucune position initiale du clic de souris n'est indiquée. (Je ne veux pas faire un vrai cercle, je veux juste utiliser le premier clic). Voir aussi Gestionnaires d'événements en JavaScript

const z = Array.from({
  longueur : 50
}, () =>Array.from({
  longueur : 50
}, () => Math.floor(Math.random() * 255)));
const plot = document.querySelector("#plot");
données const = [{
  tapez : 'carte thermique',
  z : z
}];
disposition const = {
  'axe y' : {
    'échelle d'ancrage' : 'x'
  }
} ;
const configuration = {
  modeBarButtons : [
    ["zoom2d"],
    ["zoomIn2d"],
    ["zoomOut2d"],
    ["autoScale2d"],
    ["sélectionner2d"],
    ["dessiner un cercle"]
  ],
  displaylogo : faux,
  displayModeBar : vrai
} ;
Plotly.newPlot('plot', données, mise en page, configuration);

plot.on("plotly_selected", (données) => {
  console.log(données);
});
plot.on('plotly_click', (données) => {
  console.log(données);
});</pré>
<pre class="brush:html;toolbar:false;"><script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="plot"></div>

Comment utiliser l'outil de barre de mode Sélectionner/Corriger les pixels/Points sur une carte thermique Plotly ?

Remarque : la documentation Python est plus complète que la version JS : Ajouter/Supprimer des boutons de barre modale

Answer 1

En étudiant vos exemples, j'ai trouvé le vôtre 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>