区域图表中的条件填充d3.js

const data = [
  { date: new Date("2021-01-01"), value: 10 },
  { date: new Date("2021-01-02"), value: 20 },
  { date: new Date("2021-01-03"), value: 30 },
  { date: new Date("2021-01-04"), value: 40 },
  { date: new Date("2021-01-05"), value: 50 },
];

const colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["red", "green", "blue"]);

const area = d3.area()
  .x((d) => xScale(d.date))
  .y0((d) => yScale(0))
  .y1((d) => yScale(d.value))
  .curve(d3.curveMonotoneX);

const svg = d3.select("svg");

svg.selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", (d) => area(d))
  .attr("fill", (d) => colorScale(d.category));