d3-book
d3-book copied to clipboard
Chapter 8 - Positioning Axes suggestion
I'm not sure if this qualifies as an issue, but as I was working through chapter 8, I had some trouble positioning my axes to get the zeroes to intersect as I had used some different padding logic previously. Given that the data and the axes are drawn independently, it might work better to directly transform/translate the axes to xScale(0) and yScale(0), that way they explicitly line up with how the data is drawn.
So currently the code is:
.attr("transform", "translate(0," + (h - padding) + ")"
.attr("transform", "translate( padding + ", 0)"
If it were this instead:
.attr("transform", "translate(0," + yScale(0) + ")"
.attr("transform", "translate(" + xScale(0) + ", 0)"
The first line is positioning the x-axis down to where the y-axis is zero, and the second is shifting the y-axis to where the x-axis is zero. I believe the plots in the book would be visually unaffected, as the padding is accounted for in the scale variables/functions.
Perhaps I am totally misunderstanding things, but just in case this helps anyone else :-)
@atisor73 thank you! What a great idea.
It's been some time now since I wrote those examples, so I don't remember exactly why I chose to use padding
there… I think it was due to the sequence of introducing concepts — the idea of a generic padding
value first, followed by the idea of scales second. So at the time I may not have wanted to change that element of the example (as doing so would require explaining how and why, in the text of the book).
Anyway, I agree that your proposal here is more clear, so I'm flagging this issue to be revisited at some mythical future date, should the book ever undergo another revision. 😁 Thanks!
Sounds good, really enjoying the book by the way!