如何创建基于y值的渐变阶梯图？

// 导入D3.js库
import * as d3 from 'd3';

// 准备数据集
const data = [
  { x: 0, y: 0 },
  { x: 1, y: 2 },
  { x: 2, y: 5 },
  { x: 3, y: 3 },
  // 更多数据点...
];

// 创建SVG容器
const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 300);

// 定义渐变
const gradient = svg.append('defs')
  .append('linearGradient')
  .attr('id', 'gradient')
  .attr('x1', 0)
  .attr('y1', 0)
  .attr('x2', 0)
  .attr('y2', 1);

gradient.append('stop')
  .attr('offset', '0%')
  .attr('stop-color', 'lightblue');

gradient.append('stop')
  .attr('offset', '100%')
  .attr('stop-color', 'blue');

// 创建路径生成器函数
const pathGenerator = d3.line()
  .x(d => d.x * 50)
  .y(d => d.y * 50)
  .curve(d3.curveStep);

// 创建并添加路径元素
svg.append('path')
  .attr('d', pathGenerator(data))
  .attr('fill', 'url(#gradient)');

// 添加轴线和标签
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.x)])
  .range([0, 350]);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.y)])
  .range([250, 0]);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

svg.append('g')
  .attr('transform', 'translate(0, 250)')
  .call(xAxis);

svg.append('g')
  .call(yAxis);