d3.js：标签不尊重它们的位置（简单的条形图）

我正在通过Scott Murray的工作，特别是使用更新选择来引入新的数据点。他用一个简单的条形图来演示，然后把更新标签作为一个练习。作为免责声明，我几乎是一个完整的D3Noob

因此，当每个新数据点到达时，我设法使标签转换到图表上。但是，出于神秘的原因，他们并没有把自己集中在每个酒吧里。奇怪的是，旧的、原始数据点的条形标签会这样做——只有新的不起作用。下面是它的样子（新数据从右侧滑入）：

这是我的代码：

            var labels = svg.selectAll("text")
                .data(dataset);


            labels.enter()
                .append("text")
                .text(function(d) {
                    return d;
                    })
                .attr("x", w)
                .attr("y", function(d) {
                    return h - yScale(d) + 14;
                    })
                .attr("font-family", "sans-serif")
                .attr("font-size", "11px")
                .attr("fill", "white");


            labels.transition()
                .duration(500)
                .text(function(d) {
                    return d;
                })
                .attr("x", function(d, i) {
                    return xScale(i) + xScale.rangeBand() / 2 ;
                })
                .attr("y", function(d) {
                    return h - yScale(d) + 14;
                });

---

我的直觉是，在第三块中出现了一些问题-在

labels.transition（）

之后，特别是在我的

xScale.rangeBand（）/2

业务中。但任何洞察都是非常受欢迎的

标签放置正确。您应该将属性

文本锚定

设置为

中间

，以使标签水平居中

    labels.enter()
        .append("text")
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d;
            })
        .attr("x", w)
        .attr("y", function(d) {
            return h - yScale(d) + 14;
            })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "white");

---

学习愉快

棒极了——工作起来了。谢谢你，巴勃罗。我错过了早期原始标签上的文本锚点.attr。