標籤不會在D3 v4條形圖中顯示

Question

我很努力在D3版本4圖表中爲垂直標籤添加垂直標籤。我認爲問題在於，根據SVG標準，<text>元素不能在<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>元素內。從技術上講，你可以附加他們，但你不會看到任何東西。

這就是說，這樣做的常用方法是將您的rects附加到<g>元素。這樣，您可以相應地將文本標籤添加到相應的組。

這是我更改的部分代碼。對於每個酒吧，我們附加一個新的<g>元素。在代碼的第二部分，我們將文本標籤添加到相同的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