d3.jsを使用して棒グラフにラベルを整える

Question

棒グラフを設定しようとしていますが、rect要素自体にラベルを付けることに問題があります。ここで私は、現在持っているものであり、出力は私が取得しています：

svg.selectAll("svg") 
      .data(chartData) 
      .enter() 
      .append("text") 
      .text(function (d) { 
       return d.value; 
      }) 
      .attr("x", function (d, i) { 
       return i * (width/chartData.length) + (width/chartData.length/2); 
      }) 
      .attr("y", function (d) { 
       return Math.min(450, height - (d.value * 6) + 30); 
      }) 
      .attr("class", "bar-chart-label"); 

出力：ダニが並んでいないか

注意してください。私は間違って何をしていますか？私もtext-anchor: middle CSSタグをトグルしようとしましたが、実際には問題を解決するわけではありません。

ありがとうございます。

EDIT：私がやっていることを示すjsbinの例を追加しました：http://jsbin.com/cugozihadi/edit?js,output。

Answer 1

ここに問題があります。この場合、矩形にテキストを追加するのではなく、直接svg要素に追加します。あなたがするべきことは：

1. SVG要素を作成します。 （なぜあなたはsvg.selectAll（ "svg"）をやっているのか分かりません。なぜならsvg内のsvgを選択するからです...）あなたはしないでください。
2. それに文字通りグループタグを付け加えます。
3. これらのグループに矩形とテキストを追加します。
4. 軸にその他の情報を追加します。

ここでは非常に基本的な例をご覧ください：https://bl.ocks.org/mbostock/3885304これは役に立ちます。