我需要使用热图上的“drawrect”按钮绘制矩形，并在单击时获取活动形状的索引。
目前plotly_click事件不会在点击形状轮廓时触发，plotly_relayout事件只会在形状被拖动、调整大小或擦除时触发。
这里有一个简单的例子 codepenExample 或这里：
HTML：
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
JS：
var shapes = [
{
editable: true,
label: { text: "" },
xref: "x",
yref: "y",
layer: "above",
opacity: 1,
line: { color: "white", width: 5, dash: "solid" },
fillcolor: "rgba(0, 0, 0, 0)",
fillrule: "evenodd",
type: "rect",
x0: 0.5,
y0: 0,
x1: 0.75,
y1: 1.5
}
];
var fig = {
data: [
{
z: [
[1, 20, 30],
[20, 1, 60],
[30, 60, 1]
],
type: "heatmap"
}
],
layout: {
title: "Heatmap with drawn rectangles",
shapes: shapes,
dragmode: "drawrect",
clickmode: "event+select"
},
config: {
displayModeBar: true,
modeBarButtons: [[], ["zoom2d", "drawrect", "eraseshape", "autoScale2d"]]
}
};
var gd = document.getElementById("graph");
Plotly.plot(gd, fig);
gd.on("plotly_click", function (d) {
alert("plotly click");
console.log(d);
});
gd.on("plotly_relayouting", function (d) {
alert("plotly relayouting");
console.log(d);
});
// gd.on("plotly_relayout", function(d) {
// alert("plotly relayout")
// console.log(d)
// })
// gd.on("plotly_selected", function(d) {
// alert("plotly selected")
// console.log(d);
// });
// gd.on("plotly_selecting", function(d) {
// alert("plotly selecting")
// console.log(d);
// });
我查看了 plotly.js 源代码 (draw.js) 的 draw.js 文件，发现单击形状以更改其样式并使其可拖动、可调整大小或可擦除（第 189 行）：
path.node().addEventListener('click', function() { return activateShape(gd, path); });因此，我相信应该有一种方法可以为这个“点击”事件添加动作并获取它的索引。
我还读到了一些与 dragmode 和 clickmode 属性值的依赖关系，但我无法继续使用它们。
非常感谢您的帮助！ 丫丫