为 d3.js 中的不同点添加多色渐变

Question

我必须根据脚内点的值在脚形内添加渐变。我有一个点的 X 和 Y 坐标，并附加了一个值。根据该值，我必须分配如下图所示的颜色渐变。一个点的值越高，该区域越暗

到目前为止，我已经创建了脚并为整个脚添加了 2 个颜色渐变，但我无法在图片中添加这样的渐变。以下是我所取得的成就。请如果有人可以帮助我找到任何解决方案

这里是Stackblitz Link

样本数据：

 [
  {sensor: 0, value: 7.4, x: 108, y: 406}
  {sensor: 1, value: 8.1, x: 68, y: 412}
  {sensor: 2, value: 3.6, x: 108, y: 346}
  {sensor: 3, value: 4.5, x: 61, y: 350}
  {sensor: 4, value: 0.5, x: 108, y: 280}
  {sensor: 5, value: 1, x: 49, y: 288}
  {sensor: 6, value: 1, x: 122, y: 200}
  {sensor: 7, value: 0.5, x: 30, y: 218}
  {sensor: 8, value: 3.3, x: 140, y: 109}
  {sensor: 9, value: 3.4, x: 105, y: 114}
  {sensor: 10, value: 2.7, x: 78, y: 119}
  {sensor: 11, value: 2.3, x: 51, y: 124}
  {sensor: 12, value: 1.6, x: 22, y: 136}
  {sensor: 13, value: 3.5, x: 121, y: 41}
  {sensor: 14, value: 1.2, x: 85, y: 45}
  {sensor: 15, value: 1, x: 50, y: 59}
]

Answer 1

这是一个带有“填充”数据的命中地图（基于最近点的平均值）：

只需添加足部轮廓的遮罩...

const data =  [
  {sensor: 0, value: 7.4, x: 108, y: 406},
  {sensor: 1, value: 8.1, x: 68, y: 412},
  {sensor: 2, value: 3.6, x: 108, y: 346},
  {sensor: 3, value: 4.5, x: 61, y: 350},
  {sensor: 4, value: 0.5, x: 108, y: 280},
  {sensor: 5, value: 1, x: 49, y: 288},
  {sensor: 6, value: 1, x: 122, y: 200},
  {sensor: 7, value: 0.5, x: 30, y: 218},
  {sensor: 8, value: 3.3, x: 140, y: 109},
  {sensor: 9, value: 3.4, x: 105, y: 114},
  {sensor: 10, value: 2.7, x: 78, y: 119},
  {sensor: 11, value: 2.3, x: 51, y: 124},
  {sensor: 12, value: 1.6, x: 22, y: 136},
  {sensor: 13, value: 3.5, x: 121, y: 41},
  {sensor: 14, value: 1.2, x: 85, y: 45},
  {sensor: 15, value: 1, x: 50, y: 59},
];

const populateData = (points, width, height, step) => {
    const populated = [];
    for (let x = 0; x < width; x += step)
    for (let y = 0; y < height; y += step) {
        const distances = points.map(p => 
        ({...p, distance: Math.hypot(p.x - x, p.y - y)})).filter(d => d.distance < 100);
      const sum = distances.reduce((s, d) => s + 1 / d.distance, 0);
      const value = distances.reduce((a, d) => a + 1 / sum / d.distance * d.value, 0);
      populated.push({x, y, value});
    }
  return populated;  
};

const pd = populateData(data, 300, 500, 10);

const RECT_SIZE = 20;

const getColor = v => `rgb(255,${255 - v * 25},0)`

const svg = d3.select('svg');
pd.forEach(d => {
    svg.append('rect')
    .attr('x', d.x - RECT_SIZE / 2)
    .attr('y', d.y - RECT_SIZE / 2)
    .attr('width', RECT_SIZE / 2)
    .attr('height', RECT_SIZE / 2)
    .style('fill', getColor(d.value));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />

Answer 2

这是一个包含您提供的数据的简单图表：

如果你有更多的点，它可以是更精确的图片

const data =  [
  {sensor: 0, value: 7.4, x: 108, y: 406},
  {sensor: 1, value: 8.1, x: 68, y: 412},
  {sensor: 2, value: 3.6, x: 108, y: 346},
  {sensor: 3, value: 4.5, x: 61, y: 350},
  {sensor: 4, value: 0.5, x: 108, y: 280},
  {sensor: 5, value: 1, x: 49, y: 288},
  {sensor: 6, value: 1, x: 122, y: 200},
  {sensor: 7, value: 0.5, x: 30, y: 218},
  {sensor: 8, value: 3.3, x: 140, y: 109},
  {sensor: 9, value: 3.4, x: 105, y: 114},
  {sensor: 10, value: 2.7, x: 78, y: 119},
  {sensor: 11, value: 2.3, x: 51, y: 124},
  {sensor: 12, value: 1.6, x: 22, y: 136},
  {sensor: 13, value: 3.5, x: 121, y: 41},
  {sensor: 14, value: 1.2, x: 85, y: 45},
  {sensor: 15, value: 1, x: 50, y: 59},
];

const RECT_SIZE = 20;

const getColor = v => `rgb(255,${255 - v * 25},0)`

const svg = d3.select('svg');
data.forEach(d => {
  svg.append('rect')
    .attr('x', d.x - RECT_SIZE / 2)
    .attr('y', d.y - RECT_SIZE / 2)
    .attr('width', RECT_SIZE / 2)
    .attr('height', RECT_SIZE / 2)
    .style('fill', getColor(d.value));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />