堆叠条形图d3.js中每个条形图上的文本

我希望在d3.js库中提供的堆叠条形图中的每个堆叠条形图中都有一些文本

谢谢你的帮助

我已经在这里定制了这个示例，但没有更改javascript代码中的任何其他内容

---

这是结果

这是一段重要的代码：

  state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });

这会将每个

数据

点绑定到彩色矩形。要添加文本，请按如下方式更改：

  var ages_enter = state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter();
  ages_enter.append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });
  ages_enter.append("text")
      .text(function(d) { return d3.format(".2s")(d.y1); })
      .attr("y", function(d) { return y(d.y1)+16; })
      .style("stroke", '#ffffff');

---

这将存储一个指向为每个数据点调用的“enter”方法的指针，然后为每个数据点向svg添加一个附加元素。

我用这段代码绘制出来。文本将附加到堆叠图表的中心。我们需要找出文本位置的x坐标值。对于该条，使用宽度/2

---

谢谢你的回答。这只在一个栏中添加文本，我想在每个栏（两个）中都添加文本。我感觉现在的问题是它正在绘制文本和框，但在前面的文本之上绘制下面的框。Svg没有z索引，它基于事物的附加顺序。我现在正在打电话，但我稍后会尝试运行演示。我已更改了答案。怀疑得到证实。文本正在显示，但显示在下一个栏的下方（z轴）。我通过将文本向下移动16像素来修复它。当同时发生很多事情时，文本有点狭窄。下面是我先前提出的一个问题中的一把小提琴，它可能很有用：

 var state= svg.selectAll(".state")
  .data(data)
.enter().append("g")
  .attr("class", "state")
  .attr("transform", function(d) { return "translate(" + (x(d.state)) + ",0)"; });

  module.selectAll("rect")
  .data(function(d) { return d.ages; })
  .enter().append("rect")
  .attr("width", x.rangeBand())
  .attr("y", 200)
  .attr("height", 100) 
  .style("fill", function(d) { return color(d.name); })
  .transition()
   .delay(function(d, i) { return i * 200; })
   .duration(4000)
   .attr("y", function(d) { return y(d.y1); })
   .attr('height', function(d) { return y(d.y0) - y(d.y1); });

 module.append("text")
  .attr("y", 400)
  .attr("x",x.rangeBand()/2 )
  .style("text-anchor", "middle")
  .style("font-size", "20px")
  .style("color", "white")
  .text(function(d,i) { return i+1; });