D3.jsを使用してrectにテキストを表示する

Question

d3.jsを使用して標準化された積み上げ棒グラフを開発中で、rect.itにテキストを追加しようとしています。ブラウザで検査すると追加されています。このような何か、

ここでは、あなたがrect要素にtext要素を追加することはできません

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

、私のコードです。

代わりに、あなたは親gの別々の子としてそれらを保つ必要があります：私は同じ問題https://plnkr.co/edit/cVITU9y19MoEfrIMsVYf?p=previewに直面しています

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