文本在堆积条形图的每个条上d3.js

Question

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

谢谢你的帮助.

我在这里定制了示例链接,但我没有更改javascript代码中的任何其他内容

这是结果

Answer 1

这是重要的代码:

  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); });

这将每个data点绑定到彩色矩形.要添加文本,请按以下方式更改:

  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添加一个附加元素.