将文本添加到d3条形图中

Adding text to d3 bars

本文关键字：条形图 d3 文本 添加      更新时间：2023-09-26

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

现在我的dom结构是：

g
 rect
 rect
 rect

我想要什么：

g
 g.bar
   rect
   text
 g.bar
   rect
   text

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

我的代码：

        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()

Js文件：http://jsfiddle.net/qjbgtxqu/

遵循Lars的建议（总是一个好建议），这里有一个"模板"来处理元素分组（例如g下的rect和text）：

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

你可以在这里看到Lars对处理组元素的出色解释，以及我最近在这里的简短解释。

相关文章：