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

Question

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

感谢您的帮助。

我已经在这里定制的例子link但我没有在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'); 

它保存了一个指针，被称为每个数据点的“输入法”，然后添加一个额外的元素，以SVG的每个数据点。

Answer 2

我用这段代码绘制出来了。文本将追加到堆积图的中心。我们需要找出文本位置的x坐标值。使用barWidth/2。 Demo Sorted Stacked Bar Chart

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