Javascript 如何标记分组条形图中的每个条形图？

我是D3.js的新手，我已经创建了一个分组条形图。我想把这个值放在echa条的顶部。但是，我做不到：（

我已经找到了好几种解决办法，但我做不到，效果很好

您可以在这里找到我开发的所有代码：

我创建所有条形图的功能是：

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

}

---

我做错了什么？

如果你看一下你选择的

条中的链，你会发现你试图将文本元素附加到矩形：
条是矩形的选择，而不是组的选择。当然，将文本附加到矩形在SVG中不起作用

解决方案是打破该选择。例如：

//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（）
方法