如何在d3中制作多序列条形图？

<script src="https://d3js.org/d3.v7.min.js"></script>

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const data = [
  { label: "序列1", values: [10, 20, 30, 40, 50] },
  { label: "序列2", values: [20, 30, 40, 50, 60] },
  { label: "序列3", values: [30, 40, 50, 60, 70] }
];

const xScale = d3.scaleBand()
  .domain(data.map(d => d.label))
  .range([0, width])
  .padding(0.1);

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

svg.append("g")
  .attr("class", "x-axis")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .attr("class", "y-axis")
  .call(d3.axisLeft(yScale));

svg.selectAll(".bar")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", d => xScale(d.label))
  .attr("y", d => yScale(d3.max(d.values)))
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d3.max(d.values)))
  .attr("fill", (d, i) => colorScale(i));

svg.selectAll(".bar")
  .on("mouseover", function() {
    d3.select(this).attr("fill", "red");
  })
  .on("mouseout", function() {
    d3.select(this).attr("fill", (d, i) => colorScale(i));
  });