将数据值添加到中间或以上的D3.js条形图

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

var data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  { category: "C", value: 15 },
  { category: "D", value: 5 }
];

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

svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", function(d, i) { return i * barWidth; })
   .attr("y", function(d) { return height - yScale(d.value); })
   .attr("width", barWidth)
   .attr("height", function(d) { return yScale(d.value); });

svg.selectAll("text")
   .data(data)
   .enter()
   .append("text")
   .text(function(d) { return d.value; })
   .attr("x", function(d, i) { return i * barWidth + barWidth / 2; })
   .attr("y", function(d) { return height - yScale(d.value) - 5; })
   .attr("text-anchor", "middle");