D3为图表

Question

我正在制作d3图表，并设法在图表下绘制图形和区域。我有一个挑战，使用线性渐变动态地为图表下的区域着色。

生成渐变偏移的代码是

const max = d3.max(hr_measurement.data, d => d.rate );


const maxReading =_.find(hr_measurement.data, { 'rate': max });

const gradientOffsets = [{offset: 0, color: '#888afc'}];

hr_measurement.data.forEach((d, i) => {
    if(d.rate/max <= 0.7 ){
      gradientOffsets.push(gradientOffsets.slice(-1).pop());
      gradientOffsets.push({offset: (i/hr_measurement.data.length)*100, color: '#888afc'});
    } else if((d.rate/max) > 0.7 && (d.rate/max) <= 0.8){
      gradientOffsets.push(gradientOffsets.slice(-1).pop());
      gradientOffsets.push({offset: (i/hr_measurement.data.length)*100, color: '#2d45f2'});
    } else if((d.rate/max) > 0.8 && (d.rate/max) <= 0.9){
      gradientOffsets.push(gradientOffsets.slice(-1).pop());
      gradientOffsets.push({offset: (i/hr_measurement.data.length)*100, color: '#ff8ba8'});
    } else if((d.rate/max) > 0.9 && (d.rate/max) <= 1){
      gradientOffsets.push(gradientOffsets.slice(-1).pop());
      gradientOffsets.push({offset: (i/hr_measurement.data.length)*100, color: '#ff0052'});
    }
  });

绘制渐变的代码是

g.append('linearGradient')
    .attr('id', 'readings-gradient')
    .attr('gradientUnits', 'userSpaceOnUse')
    .attr('x1', '0%').attr('y1', y(0))
    .attr('x2', '100%').attr('y2', y(0))
    .selectAll('stop')
    .data(gradientOffsets)
    .enter().append('stop')
    .attr('offset', d => d.offset )
    .attr('stop-color', d => d.color);

目前我的结果是这个