如何用光谱颜色填充x轴和曲线之间的空间？

// 创建一个SVG元素
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 创建x轴和y轴比例尺
var xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 500]);

var yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([300, 0]);

// 创建曲线生成器
var line = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

// 创建曲线数据
var data = [
  {x: 0, y: 20},
  {x: 1, y: 40},
  {x: 2, y: 60},
  {x: 3, y: 80},
  {x: 4, y: 60},
  {x: 5, y: 40},
  {x: 6, y: 20}
];

// 绘制曲线
svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("fill", "url(#gradient)");

// 创建光谱颜色渐变
var gradient = svg.append("defs")
  .append("linearGradient")
  .attr("id", "gradient")
  .attr("x1", "0%")
  .attr("y1", "0%")
  .attr("x2", "0%")
  .attr("y2", "100%");

gradient.append("stop")
  .attr("offset", "0%")
  .attr("stop-color", "blue");

gradient.append("stop")
  .attr("offset", "100%")
  .attr("stop-color", "red");