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

Question

这是小提琴。

我创建了一个响应式直方图。

我想给它加上数据标签。

我尝试过这个代码。但它对我没有帮助。

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位置应该是高度-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; })

在此处完成演示。