在D3中如何在刻度图中间制作堆叠条形图的轴线标签？

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

var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

var data = [
  {category: "A", value1: 10, value2: 20, value3: 30},
  {category: "B", value1: 15, value2: 25, value3: 35},
  {category: "C", value1: 20, value2: 30, value3: 40}
];

var keys = ["value1", "value2", "value3"];

var stack = d3.stack()
  .keys(keys)
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetNone);

var series = stack(data);

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

var xAxis = d3.axisBottom(x);

svg.selectAll("rect")
  .data(series)
  .enter().append("rect")
  .attr("x", function(d) { return x(d.data.category); })
  .attr("y", function(d) { return y(d[1]); })
  .attr("height", function(d) { return y(d[0]) - y(d[1]); })
  .attr("width", x.bandwidth());

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

svg.append("text")
  .attr("transform", "translate(" + (width / 2) + "," + (height + margin.top + 20) + ")")
  .style("text-anchor", "middle")
  .text("Category");