Bug in enter / merge / exit bar chart data labels

[indepth2]

I've enjoyed the book and the examples, thanks very much for the thorough work. However I'm stumped as to what is causing an apparent bug in the bar chart examples you provided that add and remove bars. It appears to work correctly until you add and remove enough bars so that the yScale has to expand upward.

Once that happens, all of the existing labels are now in the incorrect position on the chart and not shifting with their bars. I can't seem to find how to correct this. I'm mostly curious from a learning perspective at this point, but I'd love to see a correctly working example as well as to know the cause of the inconsistency.

I'm attempting to attach a screen shot of the bar chart in the state to which I'm referring. The labels on the middle bars are only visible when I select them with the mouse.

[scotthmurray]

Thanks, @indepth2. Which specific code example is this referring to? And if you modified it, could you please post your code? (See Appendix D.)

[indepth2]

It's the code for 01_enter_merge_exit.html. It has not been altered.

It looks like maybe someone else already reported another version of this issue back in August; and you responded that it was beyond the scope of the chapter. I wasn't able to find the "closed" issues until after I submitted this.

Even if that is the case, if possible, I'd still like to know why this isn't adjusting properly when the chart is redrawn for larger yScale values.

Also, even if it is a conscious decision to leave a flaw in the chart for simplification (and to match the process being taught), you might want to add a solution commented out to the file. That way new users don't see the examples as flawed or poorly written when they are first learning the concept.

I understand the tough choice you have to make in that regard though.

Thx for the response.

[scotthmurray]

Ah thanks! And yes, I believe that was one of the changes I left "as an exercise to the reader." I got the bars working; it's up to you to get the labels working. In the process of doing that, you get to learn how it works. :-) So that was very much on purpose.

That said, you're asking for the "answer" here. One possible solution is as follows.

Note line 242 of that file: https://github.com/alignedleft/d3-book/blob/master/chapter_12/01_enter_merge_exit.html#L242

This is what will happen when labels "update". Note that only the x attribute is updated! This explains why you see the labels maintain their vertical positions (incorrectly), even when the yScale is updated (and bar heights update, too).

So to fix this, you need to add in a function to update y. Find the code we've already written on line 233, and just copy and paste it after the x updater, so the conclusion to that chain looks like this:

.attr("x", function(d, i) {
    return xScale(i) + xScale.bandwidth() / 2;
})
.attr("y", function(d) {
    return h - yScale(d.value) + 14;
});

I hope that helps!