d3.js如何依据足部图形内点位数值实现数据驱动多色渐变

效果原理 #

目标效果本质是离散传感器点位的数值驱动连续色彩映射，区别于方向固定的全局线性渐变，色彩深度由各点测量值决定：点位测量值越高，对应周边区域着色越深，所有色彩最终被足部轮廓约束在图形内部。

实现步骤 #

• 搭建色彩映射标尺：提取所有传感器测量值的最大、最小值作为色阶定义域，绑定连续色彩插值函数，实现测量值到深浅色彩的一一对应，保证色彩映射范围和实际数据区间匹配。
• 生成连续渐变填充层（替换原有全局线性渐变），二选一即可：
  • Delaunay三角剖分方案：对所有采集点的X/Y坐标做三角剖分，将相邻三个点位围成的三角单元作为最小填充块，基于三个顶点的测量值做平滑色彩插值，拼接后形成无硬边的连续渐变层，色彩完全匹配点位的数值分布。
  • 径向叠加方案：为每个采集点生成匹配其测量值的径向渐变圆形，圆心色彩对应该点的测量值色阶，向外透明度平滑衰减至0；所有圆形图层叠加后，高值点周边色彩深度会自然叠加加深，低值点周边色彩较浅，形成自然过渡的局部渐变效果。
• 裁剪约束：将生成的渐变层以预先绘制的足部轮廓路径为边界做裁剪，隐藏轮廓外的所有渐变内容，避免色彩溢出。
• 图层层级调整：将原有全局渐变层替换为生成的局部渐变层，调整图层顺序为：足部轮廓路径 → 裁剪路径定义 → 渐变填充层 → 采集点位标记，保证视觉层次正确。

核心代码片段 #

// 初始化测量值到色彩的映射
const valueDomain = d3.extent(sensorData, d => d.value);
const colorMap = d3.scaleSequential(d3.interpolateBlues)
  .domain(valueDomain); // 低值浅蓝、高值深蓝

// 生成三角剖分的填充单元
const points = sensorData.map(d => [d.x, d.y]);
const delaunay = d3.Delaunay.from(points);

// 渲染渐变层并绑定轮廓裁剪
const heatGroup = svg.append("g").attr("class", "heat-layer");
heatGroup.selectAll("path")
  .data(sensorData)
  .join("path")
  .attr("d", (d, idx) => delaunay.renderCell(idx))
  .attr("fill", d => colorMap(d.value))
  .attr("opacity", 0.7);
heatGroup.attr("clip-path", "url(#foot-outline-clip)");

优化提示：如果点位数量较少、三角剖分的块感较强，可以给渐变层添加轻微的高斯模糊滤镜，平滑相邻单元的边界；如果需要更柔和的过渡效果，径向叠加方案的视觉表现会更接近参考效果。

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