如何将我的两个列都放入条形图？

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

// 创建数据集
var data = [
  { category: "A", value1: 10, value2: 20 },
  { category: "B", value1: 15, value2: 25 },
  { category: "C", value1: 20, value2: 30 },
  // ...
];

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

// 创建比例尺
var xScale = d3.scaleBand()
  .domain(data.map(function(d) { return d.category; }))
  .range([0, 300])
  .padding(0.1);

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

// 创建条形图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.category); })
  .attr("y", function(d) { return 200 - yScale(d.value1); })
  .attr("width", xScale.bandwidth())
  .attr("height", function(d) { return yScale(d.value1); })
  .attr("fill", function(d) { return "blue"; }); // 第一个列数据的颜色为蓝色

// 添加轴标签
svg.append("g")
  .attr("transform", "translate(0, 200)")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));