<p>Plotly ヒートマップでは、2 つの選択モードがあると便利な場合があります: </p>
<li><p>長方形の選択 (modbar ですでに利用可能)</p>
</li>
<li><p><strong>個々のピクセルを選択/修正</strong>: 不要な既存の「drawcircle」ボタンをリサイクルすることでこれを実現しようとしています。クリックすると、ピクセルがハイライト表示されるか、その上に色付きのディスク (または Google マップ UI のような赤い「ピン」) が表示されます。 </p>
</li>
</ul>
<p>問題: <code>drawcircle</code> ツールが modbar で選択されている場合、<code>plotly_click</code> イベントが起動せず (そのため、座標を取得できません)、< code>plotly_selected </code> マウスの初期クリック位置が指定されていません。 (真の円を作成する必要はありません。最初のクリックを使用したいだけです)。 JavaScript のイベント ハンドラー</p>も参照してください。
<p>
<pre class="brush:js;toolbar:false;">const z = Array.from({
長さ: 50
}, () => Array.from({
長さ: 50
}, () => Math.floor(Math.random() * 255)));
const プロット = document.querySelector("#plot");
定数データ = [{
タイプ: 'ヒートマップ',
グーグー
}];
const レイアウト = {
'yaxis': {
'スケールアンカー': 'x'
}
};
const 構成 = {
モードバーボタン: [
[「ズーム2d」]、
["zoomIn2d"],
["ズームアウト2d"],
["autoScale2d"],
["select2d"],
[「ドローサークル」]
]、
表示ロゴ: false、
表示モードバー: true
};
Plotly.newPlot('プロット', データ, レイアウト, 構成);
Lot.on("plotly_selected", (データ) => {
コンソール.ログ(データ);
});
Lot.on('plotly_click', (データ) => {
コンソール.ログ(データ);
});</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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
例を調査したところ、
dataが循環しているため、console.logには期待されたデータが提供されていないことがわかりました。ただし、data.pointsには単一の要素があるため、data.points[0].x、data.points[0] を介して座標を取得できます。それぞれ yとdata.points[0].zです。