title: Display text on rect using D3.js
body: <p>I am developing Normalized stacked bar chart using d3.js,and trying to append a text on rect.It is getting appended when i inspect in browser.But it is not visible.I want something like this,<img src="https://i.stack.imgur.com/1niDA.png" alt="enter image description here"></p>
  
  <p>Here is my code,</p>
  
  <pre><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 &lt; words.length; i++) {
              var tspan = el.append('tspan').text(words[i]);
              if (i &gt; 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);});
  
  
  });
  </code></pre>