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

Question

我正在通过Scott Murray的exercise from Chapter 9 of his book工作 - 具体来说，使用更新选择来引入新的数据点。他用简单的条形图演示它，然后将标签更新为练习。作为免责声明，我几乎是一个完整的d3菜鸟。

因此，当每个新数据点到达时，我设法将标签转换到图表上。但是，由于神秘的原因，他们不会在每个酒吧中居中。奇怪的是，旧的，原始的数据点＆＃39;条形标签做 - 只有新标签不起作用。这就是它的样子（新数据从右边滑入）：

这是我的代码：

            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业务正在发生的事情。但任何见解都会非常受欢迎！

Answer 1

标签放置正确。您应该将属性text-anchor设置为middle，以使标签水平居中。

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

快乐学习！