ラベルがD3 v4の棒グラフで表示されない

Question

D3バージョン4のグラフの各バーに縦ラベルを追加するのが苦労しています。問題は、<text>要素がSVG標準に従って<rect>要素内にあることはできませんが、私の人生にとっては、<text>要素を<rect>要素のすぐ外側に表示させる方法を考えることができません。問題のコードはここにある：

g.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("y", function(d) { return y(d.Country); }) 
    .attr("x", function(d) { return x(d.freqStart); }) 
    .attr("width", function(d) { return x(d.freqEnd) - x(d.freqStart); }) 
    .attr("height", y.bandwidth()) 
    .append("text") 
    .attr("class", "label") 
    .attr("transform", "rotate(-90)") 
    .text(function(d) { return d.Operator; }); 

完全なコードは、はい、あなたは正しいです
https://plnkr.co/edit/JiuYKhRxgqtG1osYjJHq?p=preview

Answer 1

で見つけることができます。 <text>要素は<rect>要素の内部にはありません。技術的には、それらを追加することはできますが、何も見ません。

これが一般的な方法は、あなたの矩形を<g>要素に追加することです。これにより、対応するグループにテキストラベルを追加することができます。

これは私が変更したコード部分です。各バーについて、新しい<g>要素を追加します。コードの2番目の部分では、同じg要素にテキストラベルを追加します。ここ

g.selectAll(".bar") 
.data(data) 
.enter().append("g") 
.attr("class", "bars") 
.append("rect") 
    .attr("class", "bar") 
    .attr("y", function(d) { return y(d.Country); }) 
    .attr("x", function(d) { return x(d.freqStart); }) 
    .attr("width", function(d) { return x(d.freqEnd) - x(d.freqStart); }) 
    .attr("height", y.bandwidth()); 

var bars = svg.selectAll(".bars"); 
bars.append("text") 
    .attr("class", "label") 
    .attr('transform', 'rotate(-90)') 
.attr("y", function(d) { return x(d.freqStart) + 20; }) 
.attr("x", function(d) { return -y(d.Country) + 5; }) 
    .text(function(d) { return d.Operator; }); 

全作業コード - 魔法のようにhttps://plnkr.co/edit/9rUZXl7mfw32sWJih2Ob?p=preview