Plotly JavaScript图表：如何绘制形状并选中其内的数据点？

核心思路：结合形状坐标解析与点筛选逻辑实现选中 #

不用纠结直接通过形状坐标触发原生选择事件，换个思路，先捕获形状的边界参数，再手动筛选并标记符合条件的数据点：

• 利用内置绘图工具+事件监听
  启用Plotly图表的drawrect/drawcircle等绘图模式，让用户手动绘制形状。绘制完成后，通过relayout事件捕获新增形状的参数（比如矩形的x0/x1、y0/y1，圆形的cx/cy/r）。

• 编写点-in-形状判断逻辑
  根据形状类型编写对应判断函数：

  • 矩形：判断数据点的x值在[x0, x1]区间且y值在[y0, y1]区间
  • 圆形：计算点到圆心的距离是否小于等于半径
  • 多边形：用射线法判断点是否在多边形内部（从点向右发射射线，统计与多边形边的交点数，奇数则在内部）

• 手动更新选中状态
  筛选出落在形状内的点索引后，通过Plotly API更新图表选中样式：

  // 示例：筛选矩形内的点并标记选中
  const shape = fig.layout.shapes[fig.layout.shapes.length - 1];
  const filteredIndices = fig.data[0].x.map((x, i) => {
    return x >= shape.x0 && x <= shape.x1 && fig.data[0].y[i] >= shape.y0 && fig.data[0].y[i] <= shape.y1 ? i : null;
  }).filter(i => i !== null);
  
  Plotly.restyle(fig, {
    selectedpoints: filteredIndices,
    selected: { marker: { color: '#ff4444', size: 12 } },
    unselected: { marker: { opacity: 0.2 } }
  });
  

• 自定义绘制的兼容处理
  如果是自己通过鼠标事件记录坐标绘制形状，直接用记录的坐标集合执行上述筛选逻辑即可，无需依赖Plotly内置的形状事件。

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