如何使用d3.js设置单个堆叠水平条形图的X值？

var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 300);

var data = [
  {x: "A", y: 10},
  {x: "B", y: 20},
  {x: "C", y: 15}
];

var xScale = d3.scaleBand()
               .domain(data.map(function(d) { return d.x; }))
               .range([0, width])
               .padding(0.1);

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

svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", function(d) { return xScale(d.x); })
   .attr("y", function(d) { return yScale(d.y); })
   .attr("width", xScale.bandwidth())
   .attr("height", function(d) { return height - yScale(d.y); })
   .attr("fill", "steelblue");

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

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

svg.append("g")
   .call(yAxis);