axis.tickSize accepts a function

[IPWright83]

• axis.tickSize accepts a function to allow changing the tickSize dynamically on a per tick basis - resolves #Ticks with varying size #74

[IPWright83]

The aim behind this is to help support more customised axis such as, which I believe should now be possible without having to rely on CSS nth selectors.

[IPWright83]

Thanks for the comments @mbostock , committed all those suggestions

[Fil]

Very useful! A few nits below (the nodes and this are passed as a consequence of a3e89d2).

[Fil]

What do you think about positioning the tick labels relatively to the ticks? Currently if using the function, the ticks "crash" into the axis, and I'm not sure how to fix that.

Should we not also allow tickPadding to be a function, and set it to be the result of the tickSize function + a constant padding (unless it's already been set)?

You can build on the demo notebook by forking it:
https://observablehq.com/@d3/d3-axis-ticksize-function-84

To update the build, just run yarn rollup -c in the repo and replace the d3-axis.js file in the file attachments.

It would be great to add various examples making use the new feature.

[IPWright83]

@Fil thanks, I think you'd mentioned on Slack how to setup an Observable but I hadn't had much time. Decided I could just whip this PR together last night off the cuff. Yeah I can certainly add the example that I'm trying to build.

I think you're right about tickPadding. I think we should default it to exactly what you've suggested. I'll be honest when I've been using it, I've been disabling/moving labels too - which might be something useful for the future.

[IPWright83]

Sorry, taken me a little while to get back to this. I've not added tickPadding as a function, as I couldn't foresee when you'd need to do that (and it started requiring nested ternaries which I'm not a fan of). But I've updated tickPadding to take the tickSizeFunction into account @Fil.

I've forked your example and add my use case in there (just showing major tick labels) https://observablehq.com/@ipwright83/d3-axis-ticksize-function-84 and thought of a crazy use case where you might want to move "longer labels" to prevent overlap.

[IPWright83]

Sorry to message you direct @mbostock, but would love to be able to use this if possible without maintaining a fork.

Is there anything you'd like to change to get this in? Thanks!

[curran]

Looks like a nice change to me!

[denisemauldin]

@mbostock This looks like a great PR. Any way we can help get this accepted?