使用D3.js v5在两条曲线之间进行着色

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 定义数据
var data = [
  {x: 0, y0: 10, y1: 20},
  {x: 1, y0: 15, y1: 25},
  {x: 2, y0: 20, y1: 30},
  // 更多数据...
];

// 定义比例尺
var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.x; })])
  .range([0, 500]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.y1; })])
  .range([300, 0]);

// 定义面积生成器
var area = d3.area()
  .x(function(d) { return xScale(d.x); })
  .y0(function(d) { return yScale(d.y0); })
  .y1(function(d) { return yScale(d.y1); });

// 绘制面积图
svg.append("path")
  .datum(data)
  .attr("fill", "steelblue")
  .attr("d", area);