向直方图添加数据标签所需的帮助 - d3

Question

这是Fiddle。

我创建了一个响应式histogram。

我想给它添加数据标签。

我尝试使用此代码。但这对我没有帮助。

svg.selectAll("文本") .data（直方图） 。进入（） .append("文本") .attr("x", function(d) { return x(d.x); }) .attr("y", function(d) { return y(d.y); }) .text（函数（d）{返回d；}）

请帮我解决这个问题。

我想我做得很好。

但我不知道为什么还没有创建文本元素。

提前致谢！！

Answer 1

您的代码存在 3 个小问题：

• .selectAll("text") 选择为轴添加的text 元素，将给定数据与它们匹配，您的.enter() 选择为空。因此没有添加新文本。您可以通过例如解决此问题为文本标签分配一个可区分的类别。
• y 位置应为height - y(d.y)。
• 您可能不想将整个对象显示为标签，而只是 d.y。

以下代码解决了这些问题。

svg.selectAll("text.label")
        .data(histogram)
        .enter()
        .append("text")
        .attr("class", "label")
        .attr("x", function(d) { return x(d.x); })
        .attr("y", function(d) { return height - y(d.y); })
        .text(function(d) { return d.y; })

完整的演示here。