在 Plotly 熱圖上選擇/固定單一像素
P粉806834059
2023-09-02 14:57:46
<p>在 Plotly 熱圖上，有時有 2 種選擇模式很有用：</p>
<ul>
<li><p>矩形選擇（已在 modbar 中提供）</p>
</li>
<li><p><strong>選擇/固定單一像素</strong>：我試圖透過回收我不需要的現有「drawcircle」按鈕來實現這一點。單擊時，像素應突出顯示，或其頂部有一個彩色圓盤（或紅色“圖釘”，如 Google 地圖 UI）</p>
</li>
</ul>
<p>問題：當在modbar 中選擇<code>drawcircle</code> 工具時，<code>plotly_click</code> 事件不會觸發（因此我們無法取得座標），且<code>plotplotly_| </code> 沒有給出初始的滑鼠點擊位置。 （我不想製作真正的圓形，我只想使用第一次點擊）。另請參閱 JavaScript 中的事件處理程序</p>
<p>
<pre class="brush:js;toolbar:false;">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);
});</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>如何在 Plotly 熱圖上使用「選擇/固定像素/點」模式列工具？ </strong></p>
<p>注意：Python 文件比 JS 版本更完整：新增/移除模式列按鈕</p>
研究了您的範例，我發現您的
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}); });