文本在堆疊條形圖的每個條上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; });