Question

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

现在我的dom结构是：

g
 rect
 rect
 rect

我想要的是什么：

g
 g.bar
   rect
   text
 g.bar
   rect
   text

如何将父（g）添加到我的rect并将rect和text添加为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()

Jsfiddle：http://jsfiddle.net/qjbgtxqu/

Answer 1

根据Lars建议（总是很好），这里有一个“模板”来处理元素分组（例如rect下的text和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

你可以看到Lars关于处理组元素here的优秀解释以及我最近的简要解释here。

将文字添加到d3栏

1 个答案: