d3.js 条形图：.text 不显示答案

【问题标题】：d3.js bar chart: .text doesn't show upd3.js 条形图：.text 不显示
【发布时间】：2016-04-24 20:59:31
【问题描述】：

我正在使用 d3.js 构建一个简单的条形图，它工作正常。但是，当我尝试在每个栏上显示文本时，什么也没有发生。控制台没有返回任何错误，所以我无法理解这个问题。我的代码可用here，我尝试显示简单的文本，如“Hello”，但仍然没有任何显示。

【问题讨论】：

您希望文本出现在哪里，以及您希望它对给定条具有什么值？
我想在每根柱的末尾出现空置的值（freqData 变量的属性）。
您是否尝试过完成本教程：alignedleft.com/tutorials/d3/making-a-bar-chart？我意识到本教程有一个垂直图表而不是水平图表，但我希望它仍然有用。您正在尝试通过 rects 上的 selectAll 应用文本标签，而不是 texts 上的 selectAll。

标签： javascript d3.js charts bar-chart

【解决方案1】：

问题：

将文本附加到 SVG 中的 rect 元素。

解决方案：

将文本附加到 SVG 或组。

说明：

您正在将文本附加到矩形。控制台中不会显示任何错误，因为没有要显示的错误，但文本不会出现。

您必须为文本创建一个变量：

var texts = svg.selectAll(".mytexts")
                            .data(data)
                            .enter()
                            .append("text");

然后设置属性：

texts.attr("class", "value")
              .attr("x", function(d) { return widthScale(d.vacant); })
              .attr("y", heightScale.rangeBand() / 2)
              .attr("dx", -3)
              .attr("dy", ".35em")
              .attr("text-anchor", "end")
              .text(function(d) { return format(d.vacant); });

不要忘记相应地更改 CSS。

【讨论】：

很好的解释！！！！太感谢了！现在一切正常，我真的不明白如何将文本链接到 rects 变量和 svg。
别担心！要将文本链接到矩形，最好的方法是创建组（svg 中的元素）。