Plotly.js 2D Histogram contour足部压力可视化形状失真求优化方案

我使用Plotly.js的histogram2dcontour功能展示足部压力数据，但生成的图表形状偏差较大，无法呈现足部压力的真实形态。数据包含两只脚的信息，其中一只存在大量缺失数据，希望实现类似倒置足部热图示例的形态，但带有等高线效果。

当前配置代码如下：

var trace2 = {
  x: x,
  y: y,
  name: 'density',
  ncontours: 20,
  colorscale: 'Hot',
  reversescale: true,
  showscale: false,
  type: 'histogram2dcontour',
  histfunc: 'sum',
  z: weights
};

调整方案 #

1. 手动指定分箱尺寸 #

histogram2dcontour默认分箱规则会导致形状失真，通过xbins和ybins手动设置分箱大小，让分箱贴合足部数据的密度分布：

var trace2 = {
  // 原有配置保留
  xbins: { size: 5 }, // 根据数据坐标系调整数值，越小越贴合细节
  ybins: { size: 5 }
};

注意分箱尺寸不要过小，避免放大数据噪声。

2. 过滤缺失数据 #

先剔除无效的缺失值，避免空分箱干扰等高线生成逻辑：

// 过滤x、y、weights中的缺失项
const validIndices = x.map((_, idx) => x[idx] != null && y[idx] != null && weights[idx] != null);
const filteredX = x.filter((_, idx) => validIndices[idx]);
const filteredY = y.filter((_, idx) => validIndices[idx]);
const filteredWeights = weights.filter((_, idx) => validIndices[idx]);

// 使用过滤后的数据生成trace
var trace2 = {
  x: filteredX,
  y: filteredY,
  z: filteredWeights,
  // 原有配置保留
};

3. 切换到Contour类型生成等高线 #

如果histogram2dcontour的分箱逻辑不匹配数据特性，直接使用contour类型，基于原始数据插值生成等高线，更适合连续压力分布的呈现：

// 先将散点数据转换为二维网格（可通过插值算法生成z的二维数组）
var trace2 = {
  type: 'contour',
  x: [...new Set(filteredX)].sort(), // 去重排序后的x轴值
  y: [...new Set(filteredY)].sort(), // 去重排序后的y轴值
  z: interpolatedZ, // 插值得到的二维压力值网格
  ncontours: 20,
  colorscale: 'Hot',
  reversescale: true,
  showscale: false
};

可以使用线性插值或平滑插值算法构建二维网格，精准还原足部形态。

4. 调整等高线平滑度 #

若坚持使用histogram2dcontour，可通过contours.smoothing参数平衡形状准确性与视觉平滑度：

var trace2 = {
  // 原有配置保留
  contours: {
    smoothing: 1.3 // 取值范围0-2，值越高越平滑，按需调整
  }
};

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