如何在Plotly JavaScript中获取选框的x、y坐标？

要获取Box Select生成的选框坐标范围，不需要从layout.selections.path入手，而是通过监听plotly_selected事件来获取：

• 监听图表的plotly_selected事件，该事件会在用户完成Box Select操作后触发。
• 在事件回调的参数中，event.range属性直接包含选框的x、y轴范围，其中range.x是[x.min, x.max]数组，range.y是[y.min, y.max]数组。

示例代码：

// 获取图表容器元素
const graphDiv = document.getElementById('your-graph-id');

// 绑定选框完成事件
graphDiv.on('plotly_selected', function(event) {
  // 仅处理Box Select生成的范围（Lasso Select不会返回range）
  if (event.range) {
    const [xMin, xMax] = event.range.x;
    const [yMin, yMax] = event.range.y;
    
    // 这里可以使用获取到的坐标值
    console.log(`X轴范围：${xMin} ~ ${xMax}`);
    console.log(`Y轴范围：${yMin} ~ ${yMax}`);
  }
});

补充说明：

• layout.selections.path是用于预设初始选框路径的配置项，并非存储用户操作后选框范围的属性，所以无法通过它获取坐标。
• 如果是Lasso Select操作，事件参数会返回points数组而非range，可以通过是否存在event.range来区分两种选框操作。

内容的提问来源于stack exchange，提问作者drypatrick