如何在D3中生成背靠背图表？

var svg = d3.select("#container")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

var chart1 = svg.append("g")
  .attr("class", "chart1")
  .selectAll("rect")
  .data(data1)
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.x); })
  .attr("y", function(d) { return yScale(d.y); })
  .attr("width", barWidth)
  .attr("height", function(d) { return height - yScale(d.y); })
  .attr("fill", color1);
  
var chart2 = svg.append("g")
  .attr("class", "chart2")
  .selectAll("rect")
  .data(data2)
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.x) + barWidth + barPadding; })
  .attr("y", function(d) { return yScale(d.y); })
  .attr("width", barWidth)
  .attr("height", function(d) { return height - yScale(d.y); })
  .attr("fill", color2);

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

svg.append("g")
  .attr("class", "y-axis")
  .call(yAxis);

svg.append("text")
  .attr("class", "title")
  .attr("x", width / 2)
  .attr("y", margin.top / 2)
  .attr("text-anchor", "middle")
  .text("Back-to-Back Chart");