D3.js kullanarak rect üzerindeki metinleri görüntüleme

Question

d3.js kullanarak normalleştirilmiş yığılmış çubuk grafik geliştiriyorum ve rect'te bir metin eklemeye çalışıyorum. Tarayıcıda incelediğimde ekleniyor. Ama görünmüyor. İstiyorum Sen rect elemanlarına text unsurları ekleme olamaz

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


}); 

Answer 1

böyle bir şey, İşte

benim kodudur.

Bunun yerine, ebeveyn g ayrı çocukları olarak tutmalı: Ben aynı sorunu https://plnkr.co/edit/cVITU9y19MoEfrIMsVYf?p=preview karşı karşıyayım

var sandeep= state.selectAll(".data") 
     .data(function(d) { return d.ages; }) 
     .enter(); 

    sandeep.append("rect") 
     .classed('data', true) 
     .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);}); 

    sandeep 
     .append("text") 
     .classed('data', true) 
     .attr("y", function(d) { return (y(d.y1) + y(d.y0))/2; }) // Center 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);});