Javascript 向d3条添加文本

我在向栏中添加文本时遇到一些问题。我想在条形图上方显示该值，但无法在每个条形图上添加文本

现在我的dom结构是：

g
 rect
 rect
 rect 

我想要的是：

g
 g.bar
   rect
   text
 g.bar
   rect
   text

如何将父对象（g）添加到我的rect，并将rect和文本添加为childs

我的代码：

        bars = svg.selectAll('rect').data(datasource)
            # bars enter
            bars.enter().append('rect')
                    .attr('class', (d, i) =>
                        "rect-" + i)
                    .attr('x', (d) =>
                        x(d.age))
                    .attr('y', height)
                    .attr('width', x.rangeBand())
                    .attr('height', 0)
                    .attr('fill', (d) =>
                        d.color)

            bars
                .attr('fill', (d) ->
                    d.color)
                .transition()
                    .delay(200)
                    .ease(transition_ease)
                    .duration(transition_duration)
                    .attr('y', (d) =>
                        y(d.value))
                    .attr('height', (d) =>
                        height - y(d.value))

            bars.exit().remove()

jsiddle:

遵循LAR的建议（始终是一个好建议），这里有一个“模板”来处理元素分组（例如

rect

和

g

下的

text

）：

---

您可以看到LAR对处理组元素的出色解释以及我最近的简要解释。

plz为您提供了一个codeAppend

g

元素开始，而不是

rect

s。然后将

rect

和

text

元素附加到那些

g

s中；我已经用JSFIDDL更新了我的问题谢谢你的回答，我试着让它工作，但是所有的栏都没有了。我认为进入和离开的原则对我来说不是很清楚。检查我更新的小提琴：问题是您已经为轴创建了

g

元素，因此您必须通过为数据g分配一个类来区分它们，然后根据所述类选择它们。为了更好地利用D3的习惯用法，我做了这个改动以及其他语法上的改动。我还设置并放置了用于演示目的的标签。您需要改进它们的渲染。这是完整的。哇，你是我的英雄！我忘了在我的图表中有多个g：(

group = svg.selectAll('g')
    .data(datasource) # bind data to g elements

group.exit()
    .remove();

groupEnter = group.enter()
    .append("g") # append g elements

groupEnter
    .append("rect") # append rect elements

groupEnter
    .append("text") # append text elements

group
    ... # update g elements, if needed (e.g. add transform, add listeners)

group.select("rect")
    .data(datasource)
    ... # update the rect elements

group.select("text")
    .data(datasource)
    ... # update the text elements