如何在一个条形图上使用两个Y轴值绘制两个变量

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

// 准备数据
var data1 = [5, 10, 15, 20, 25];
var data2 = [10, 20, 30, 40, 50];
var xLabels = ["A", "B", "C", "D", "E"];

// 创建比例尺
var xScale = d3.scaleBand()
               .domain(xLabels)
               .range([0, width])
               .padding(0.1);

var yScale1 = d3.scaleLinear()
                .domain([0, d3.max(data1)])
                .range([height, 0]);

var yScale2 = d3.scaleLinear()
                .domain([0, d3.max(data2)])
                .range([height, 0]);

// 添加第一个Y轴
svg.append("g")
   .attr("class", "y-axis")
   .call(d3.axisLeft(yScale1));

// 添加第二个Y轴
svg.append("g")
   .attr("class", "y-axis")
   .attr("transform", "translate(" + width + ", 0)")
   .call(d3.axisRight(yScale2));

// 绘制第一个变量
svg.selectAll(".bar1")
   .data(data1)
   .enter()
   .append("rect")
   .attr("class", "bar1")
   .attr("x", function(d, i) { return xScale(xLabels[i]); })
   .attr("y", function(d) { return yScale1(d); })
   .attr("width", xScale.bandwidth() / 2)
   .attr("height", function(d) { return height - yScale1(d); });

// 绘制第二个变量
svg.selectAll(".bar2")
   .data(data2)
   .enter()
   .append("rect")
   .attr("class", "bar2")
   .attr("x", function(d, i) { return xScale(xLabels[i]) + xScale.bandwidth() / 2; })
   .attr("y", function(d) { return yScale2(d); })
   .attr("width", xScale.bandwidth() / 2)
   .attr("height", function(d) { return height - yScale2(d); });

// 添加图例
svg.append("text")
   .attr("x", 10)
   .attr("y", -10)
   .text("Variable 1");

svg.append("text")
   .attr("x", width - 80)
   .attr("y", -10)
   .text("Variable 2");