<p>Plotly 히트맵에서는 때때로 2가지 선택 모드를 사용하는 것이 유용합니다. </p>
<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>plotly_selected 초기 마우스 클릭 위치가 제공되지 않습니다. (실제 원을 만들고 싶지 않고 첫 번째 클릭만 사용하고 싶습니다.) JavaScript의 이벤트 핸들러</p>도 참조하세요.
<p>
<pre class="brush:js;toolbar:false;">const z = Array.from({
길이: 50
}, () =>
길이: 50
}, () => Math.floor(Math.random() * 255)));
const 플롯 = document.querySelector("#plot");
const 데이터 = [{
유형: '히트맵',
z: z
}];
const 레이아웃 = {
'y축': {
'scaleanchor': 'x'
}
};
const 구성 = {
모드바버튼: [
["zoom2d"],
["zoomIn2d"],
["zoomOut2d"],
["autoScale2d"],
["select2d"],
["드로서클"]
],
디스플레이로고: 거짓,
디스플레이모드바: 참
};
Plotly.newPlot('plot', 데이터, 레이아웃, 구성);
plot.on("plotly_selected", (데이터) => {
console.log(데이터);
});
plot.on('plotly_click', (데이터) => {
console.log(데이터);
});</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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
귀하의 사례를 연구하다가 귀하의 사례를 찾았습니다
console.log没有提供预期的数据，因为data是循环的。但是，由于data.points具有单个元素，因此您可以通过data.points[0].x、data.points[0] 获取坐标。分别为 y和data.points[0].z.