search

scotthmurray / d3-book

Code examples for “Interactive Data Visualization for the Web”
http://d3book.com
Other
2.4k stars 1.79k forks source link

Remove redundancy between Enter and Update in 25_adding_values.html #4

Closed ateucher closed 11 years ago

ateucher commented 11 years ago

I think there is a bit of redundancy in these two code sections? In the bars.enter() chain "x", "y", "width", "height", and "fill" are set. In the bars.transition() chain, the only things that change are "x" and "width", so I think setting "y" and "height" there again is unnecessary.

ateucher commented 11 years ago

I've since figured out this was wrong... but I'm a bit confused as to why.

scotthmurray commented 11 years ago

Yes, that is confusing, but deliberate. :-)

bars.enter() is for entering bars. When you click the text, one new data value is added, and the enter() selection represents the new, corresponding element. The new bar is placed just beyond the right edge of the SVG.

The subsequent "update" portion bars.transition()… updates values for all bars, including the new one, so all bars move into their new positions. The new bar appears to "slide in" from the right side.

Your're right that there is probably more redundancy in this example than is needed, because only width and x need to change. But this example is building up to more complex examples later in the chapter.

ateucher commented 11 years ago

Thanks very much Scott - I get it now. After playing with it a bit more, I see that y and height also need to change because the input domain to yScale may change, depending on the value of the new datum (i.e., if it is greater than the previous maximum).

scotthmurray commented 11 years ago

Yes! Good catch. Yet I think this particular example has a max value of 25, so, in reality the yScale doesn't change (but this is more flexible, and would work with larger values, if you allowed them).