d3水平バーにテキストを追加できません

Question

いくつかの選択肢に基づいて更新される次の水平棒グラフ（http://bl.ocks.org/juan-cb/ab9a30d0e2ace0d2dc8c）を使用しています。私は各バーの中に値を表示するバーにラベルを追加しようとしています。どこが間違っているのか分かりません。私は当初SVG rect要素を持っていましたが、これは "g"要素の下にグループ化され、その方法を試みましたがまだ運がありませんでした。どんな助けもありがとう！

JsFiddle - https://jsfiddle.net/b772s5mg/3/

JS

datasetTotal = [ 
     {label:"Category 1", value:19}, 
     {label:"Category 2", value:5}, 
     {label:"Category 3", value:13}, 
     {label:"Category 4", value:17}, 
     {label:"Category 5", value:21}, 
     {label:"Category 6", value:25} 
    ]; 

    datasetOption1 = [ 
     {label:"Category 1", value:22}, 
     {label:"Category 2", value:33}, 
     {label:"Category 3", value:4}, 
     {label:"Category 4", value:15}, 
     {label:"Category 5", value:36}, 
     {label:"Category 6", value:0} 
    ]; 

    datasetOption2 = [ 
     {label:"Category 1", value:10}, 
     {label:"Category 2", value:20}, 
     {label:"Category 3", value:30}, 
     {label:"Category 4", value:5}, 
     {label:"Category 5", value:12}, 
     {label:"Category 6", value:23} 
    ]; 

    d3.selectAll("input").on("change", selectDataset); 

    function selectDataset() 
    { 
     var value = this.value; 
     if (value == "total") 
     { 
      change(datasetTotal); 
     } 
     else if (value == "option1") 
     { 
      change(datasetOption1); 
     } 
     else if (value == "option2") 
     { 
      change(datasetOption2); 
     } 
    } 

    var margin = {top: (parseInt(d3.select('body').style('height'), 10)/20), right: (parseInt(d3.select('body').style('width'), 10)/20), bottom: (parseInt(d3.select('body').style('height'), 10)/20), left: (parseInt(d3.select('body').style('width'), 10)/5)}, 
      width = parseInt(d3.select('body').style('width'), 10) - margin.left - margin.right, 
      height = parseInt(d3.select('body').style('height'), 10) - margin.top - margin.bottom; 

    var div = d3.select("body").append("div").attr("class", "toolTip"); 

    var formatPercent = d3.format(""); 

    var y = d3.scale.ordinal() 
      .rangeRoundBands([height, 0], .2, 0.5); 

    var x = d3.scale.linear() 
      .range([0, width]); 

    var xAxis = d3.svg.axis() 
      .scale(x) 
      .tickSize(-height) 
      .orient("bottom"); 

    var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 
    //.tickFormat(formatPercent); 

    var svg = d3.select("body").append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

    d3.select("input[value=\"total\"]").property("checked", true); 
    change(datasetTotal); 

    function change(dataset) { 

     y.domain(dataset.map(function(d) { return d.label; })); 
     x.domain([0, d3.max(dataset, function(d) { return d.value; })]); 

     svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

     svg.select(".y.axis").remove(); 
     svg.select(".x.axis").remove(); 

     svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(0)") 
       .attr("x", 50) 
       .attr("dx", ".1em") 
       .style("text-anchor", "end") 
       .text("Option %"); 


     var bar = svg.selectAll(".bar") 
       .data(dataset, function(d) { return d.label; }) 
     // new data: 
     .enter().append("g").append("rect") 
       .attr("class", "bar") 
       .attr("x", function(d) { return x(d.value); }) 
       .attr("y", function(d) { return y(d.label); }) 
       .attr("width", function(d) { return width-x(d.value); }) 
       .attr("height", y.rangeBand()); 

       bar.append("text") 
    .attr("x", function(d) { return x(d) - 3; }) 
    .attr("y", 30) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.value; }); 


     var bars = d3.select("svg").selectAll("g.rects").data(dataset); 

     // removed data: 
     bars.exit().remove(); 

     // updated data: 
     bars.transition() 
       .duration(750) 
       .attr("x", function(d) { return 0; }) 
       .attr("y", function(d) { return y(d.label); }) 
       .attr("width", function(d) { return x(d.value); }) 
       .attr("height", y.rangeBand()); 

    }; 

Answer 1

あなたは<g>（グループ）の要素に<text>要素を追加していると思うかもしれないが、あなたはそうではありません！

.enter().append("g").append("rect") 

あなたがこれを行う瞬間は... ...あなたは今<rect>要素にテキスト要素を追加しようとしているが、これは動作しません。

ソリューション：あなたのbars変数を破る：ここ

//appending the <g> elements 
var bar = svg.selectAll(".bar") 
    .data(dataset, function(d) { 
     return d.label; 
    }) 
    .enter().append("g"); 

//now you append the <rect> to the <g> 
bar.append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { 
     return x(d.value); 
    }) 
    .attr("y", function(d) { 
     return y(d.label); 
    }) 
    .attr("width", function(d) { 
     return width - x(d.value); 
    }) 
    .attr("height", y.rangeBand()); 

//and then you append the <text> to the <g> 
bar.append("text") 
    .attr("x", function(d) { 
     return x(d.value) - 3; 
    }) 
    .attr("text-anchor", "end") 
    .attr("y", function(d) { 
     return y(d.label) + y.rangeBand()/2; 
    }) 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return d.value; 
    }); 

は、あなたの更新フィドルです：https://jsfiddle.net/v8razxc8/

Answer 2

私はグラム要素内RECTとテキストの両方を追加し、所定の位置に変換する変換することを好みます。 https://jsfiddle.net/sjp700/b772s5mg/4/

var bar = svg.selectAll(".bar") 
       .data(dataset, function(d) { return d.label; }) 
     // new data: 
     var bar_g = bar.enter().append("g") 
      .attr("transform", function (d) { return "translate(" + x(d.value) + "," + y(d.label) + ")"; }); 


     bar_g.append("rect") 
       .attr("class", "bar")    
       .attr("width", function(d) { return width-x(d.value); }) 
       .attr("height", y.rangeBand()); 


     bar_g.append("text") 
      .attr("transform", function (d) { return "translate(" + 10 + "," + 10 + ")"; }) 
      .attr("y", 30) 
      .attr("dy", ".35em") 
      .text(function(d) { return d.value; 

}）;