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

Question

这是Fiddle。

我创建了一个响应式histogram。

我想向其添加数据标签。

我试过这段代码。但它并没有帮助我。

svg.selectAll("text")
            .data(histogram)
            .enter()
            .append("text")
            .attr("x", function(d) { return x(d.x); })
            .attr("y", function(d) { return y(d.y); })
        .text(function(d) { return 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。