Append Text To Grouped Bar Chart In D3js V4

Im trying to append text to a Grouped Bar Chart in d3js v4, more specifically, the values corresponding to each bar. I want the numbers to be displayed inside the bars and I can't

Solution 1:

Lots of ways to do this; here's how I would do it.

First, keep a reference to the groups g element so that we can append our text with the bars:

var gE = g.append("g")
  .selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", function(d) {
    return"translate(" + x0(d.State) + ",0)";
  });

gE.selectAll("rect")
  .data(function(d) {
  ...

Then use a sub-selection to add the text:

gE.selectAll("text")
  .data(function(d) {
    return [d['Team 1'], d['Team 2'], d['Team 3']];
  })
  .enter()
  .append("text")
  ...

---

Running code is here.