这是因为绑定到您要添加的文本的数据不正确.

如果按如下所示添加console.log，您将能够看到为什么未插入标签的原因.在控制台中检查输出. 控制台日志小提琴

.text(function(d) {console.log(d); return d.value; });

一种方法是将文本附加到条形组(在您的情况下为切片").就像您为酒吧所做的一样.这是一个小提琴: JS小提琴演示

    slice.selectAll(".text")
    .data(function(d) { return d.values; })
    .enter()
    .append("text")
    .attr("class","label");
  slice.selectAll('text.label')
    .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
    .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
    .text(function(d) {return d.value; });

这看起来很奇怪，因为在过渡栏之前显示了文本.因此，在显示条形之后更改文本的值似乎对我来说是正确的方法. (可以根据需要调整dx和dy属性)

这是最后的小提琴: JS场

我在每次转换时都使用结束"回调，并相应地更改文本值.

.each('end', function () {
    d3.select(this.parentNode).selectAll('text.label')
        .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
        .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
        .text(function(d) {return d.value; });
})

希望这会有所帮助. :) 让我知道代码的任何部分是无法理解的.

I have a grouped bar chart design that has each bar amount immediately above the bar instead of the y axis bar on the far left.

I have added the text like so...

svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("class","label")
  .attr("x", function(d) { return x1(d.rate) })
  //.attr("y", function(d) { return y(d.value) + 1; })
.attr("dy", ".75em")
.text(function(d) {return d.value; });

But i cant seem to obtain the x and y values according to the bar position and the actual text of the d.value isn't getting inserted.

Sample here: https://jsfiddle.net/6p7hmef1/7/

That's because the data bound to the texts that you're adding isn't right.

If you add a console.log as follows, you'll be able to see why the labels aren't being inserted. Check for the outputs in console. Console log fiddle

.text(function(d) {console.log(d); return d.value; });

One approach would be to append the texts to the bar groups ("slice" in your case). Just like you do for the bars. Here's a fiddle doing this: JS Fiddle Demo

    slice.selectAll(".text")
    .data(function(d) { return d.values; })
    .enter()
    .append("text")
    .attr("class","label");
  slice.selectAll('text.label')
    .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
    .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
    .text(function(d) {return d.value; });

This might look weird as the texts are shown before the transition of the bars. So changing the value of texts once the bars are shown seems like the right approach to me. (dx and dy attributes can be adjusted as per the requirement)

Here's the final fiddle: JS FIDDLE

I'm using the "end" callback for every transition and changing the text values accordingly.

.each('end', function () {
    d3.select(this.parentNode).selectAll('text.label')
        .attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
        .attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
        .text(function(d) {return d.value; });
})

Hope this helps. :) Let me know if any part of the code isn't understandable.