How to label each bar from a grouped bar chart?

user_676490 0
Viewed 218

I'm newbie with D3.js and I have created a grouped bar chart. And I would like to put the value at the top of echa bar. But, I'm not able to do it :(

I have found several solutiones but I cannot do it works fine.

You can find all the code of my development here:

Edit MultipleBarChart

The function where I create all the bars is:

  setBars(canvas, data, scales, keys, colors) {
    let height = HEIGHT - OFFSET_TOP - OFFSET_BOTTOM;

  let bar = canvas
  .append("g")
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + scales.x0Scale(d.shoot) + ",0)";
  })
  .selectAll("rect")
  .data(function(d) {
    return keys.map(function(key) {
      return { key: key, value: d[key] };
    });
  })
  .enter()
  .append("rect")
  .attr("class", "rect")
  .attr("x", function(d) {
    return scales.x1Scale(d.key);
  })
  .attr("y", function(d) {
    return scales.yScale(d.value);
  })
  .attr("width", scales.x1Scale.bandwidth())
  .attr("height", function(d) {
    return height - scales.yScale(d.value);
  })
  .attr("fill", function(d) {
    return colors(d.key);
  });
//set label over bar
bar
  .selectAll("g")
  .data(function(d) {
    return d.value;
  })
  .enter()
  .append("text")
  .attr("class", "bar-text")
  .attr("fill", "#000")
  .attr("text-anchor", "middle")
  .text(function(d) {
    console.log("d.value: " + d.value);
    return d.value;
  })
  .attr("x", function(d, i) {
    return scales.x1Scale.bandwidth() * (i + 0.5);
  })
  .attr("y", function(d, i) {
    return scales.yScale(d.value) + 8;
  });

}

What am I doing wrong?

d3.js svg javascript
1 Answers

If you look at the chain in your bar selection you'll see that you're trying to append text elements to rects: bar is a selection of rectangles, not a selection of groups. Appending texts to rectangles, of course, won't work in an SVG.

The solution is breaking that selection. For instance:

//This is the group selection:
let bar = canvas
  .append("g")
  .selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + scales.x0Scale(d.shoot) + ",0)";
  });

//Here, you append rects to the groups:
bar.selectAll("rect")
  .data(function(d) {
    return keys.map(function(key) {
      return {
        key: key,
        value: d[key]
      };
    });
  })
  .enter()
  .append("rect")
  //etc...

//Finally, here, you append texts to the groups:
bar.selectAll("text")
  .data(function(d) {
    return keys.map(function(key) {
      return {
        key: key,
        value: d[key]
      };
    });
  })
  .enter()
  .append("text")
  //etc...

As you can see, you'll have to change the data() method as well.

user_57689080
Related