如何标记分组条形图中的每个条形? [英] How to label each bar from a grouped bar chart?

问题描述

我是 D3.js 的新手，我创建了一个分组条形图.我想把值放在 echa bar 的顶部.但是，我做不到:(

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:

我创建所有条形的函数是:

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;
  });

}

我做错了什么?

推荐答案

如果您查看 bar 选择中的链，您将看到您正在尝试将文本元素附加到矩形:bar 是矩形的选择，而不是组的选择.当然，将文本附加到矩形在 SVG 中是行不通的.

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...

如您所见，您还必须更改 data() 方法.

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

这篇关于如何标记分组条形图中的每个条形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！