Afficher le texte sur rect en utilisant D3.js

Je suis en train d'élaborer Normalisé de diagramme à barres empilées à l'aide de d3.js et en essayant d'ajouter un texte sur rect.Il est ajouté quand j'ai inspecter dans le navigateur.Mais il n'est pas visible.Je veux quelque chose comme cela,

Voici mon code,

var margin = {top: 20, right: 100, bottom: 30, left: 40},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .11);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var color = d3.scale.ordinal()
.range(["#404041", "#00adef", "#bbbdc0", "#d1d2d4", "#d3d3d3"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format("10"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom + 20)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("Nstackedbardata.json", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) {return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.ages.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
});
data.sort(function(a, b) { return b.ages[0].y1 - a.ages[0].y1; });
x.domain(data.map(function(d) { return d.State; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.style("fill", "#bbbdc0")
.append("text")
.attr("class","barChartAxisValue");
var insertLinebreaks = function (d) {
var el = d3.select(this);
var words = d.split(' ');
el.text('');
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0)
tspan.attr('x', 0).attr('dy', '12');
}
};
svg.selectAll('g.x.axis g text').each(insertLinebreaks);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.style("fill", "#bbbdc0")
.append("text")
.attr("class","barChartAxisValue")
.attr("transform", "rotate(-90)")
.attr("x",-70)
.attr("y", -15)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Percentage");
var state = svg.selectAll(".state")
.data(data)
.enter().append("g")
.attr("class", "state")
.attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });
var sandeep= 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);})
.append("text")
.attr("fill","#fff")
.style("stroke-width", 1)
.style({"font-size":"18px","z-index":"999999999"})
.style("text-anchor", "middle")
.text(function(d) { return ((d.y1-d.y0)*100).toFixed(0);});
});

source d'informationauteur Preethi