d3.js: Labels are not respecting their place (simple bar chart) - d3.js

Question

I'm working through Scott Murray's exercise from Chapter 9 of his book - specifically, using update selection to introduce new data points. He demonstrates it with a simple bar chart, and then leaves updating the labels as an exercise. As a disclaimer, I'm almost a complete d3 noob.
So I've managed to get the labels transitioning onto the chart as each new data point arrives. But, for reasons mysterious, they don't center themselves in each bar. Weirdly, the old, original data points' bar labels do - only the new ones don't work. Here's what it looks like (new data is sliding in from the right):
And here's my code:
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;
});
My instinct is that it's something going wrong in the third chunk - after labels.transition(), and specifically, something going on with my xScale.rangeBand() / 2 business. But any insight would be very welcome!

Answer 1

The labels are correctly placed. You should set the attribute text-anchor to middle to get the labels horizontally centered.
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");
Happy learning!