D3 Bar Label On Grouped Chart Bar

Im using this example - https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad and trying to add adittional infromation on the bars. I tried: slice.selectAll('rect').append('text')

Solution 1:

Have a look at your screenshot, the translate attribute contains function u(n)..... The variable y is a function not the value of the rect Y-coord. To get that you need d3.select(this).attr("y"). But then the text is also not visible I used y(d.value) but that is equivalent.

You have to add the texts just like the rects.

This you need to add to the d3v5 code I posted in https://stackoverflow.com/a/51573685/9938317

The text does not animate yet, use the same animation code as for the rect Y-coord. Or create the text at the end of the rect animation.

slice.selectAll("text")
      .data(function(d) { return d.values; })
    .enter().append("text")
        .attr("class", 'bar-text')
        .attr("fill", "#000")
        .attr("text-anchor", "middle")
        .text(function (d) { return d.value; })
        .attr("x", function (d, i) { return x1.bandwidth() * (i+0.5); })
        .attr("y", function (d, i) { returny(d.value) + 8; });