Changing size of D3 tick marks based on tick value

Question

I've created a x-axis with a custom tickFormat in D3.

It prints a tick for each month, but labels January as the year, i.e 2014, 2013, etc.

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.month, 1)
    .tickFormat(d3.time.format.multi([["%b", function(d) { return d.getMonth(); }], ["%Y", function() { return true; }]]))
    .tickSize(4)
    .tickPadding(8);

I'd like to vary the tickSize as well and have a long tick for the year markers.

But it doesn't appear you can use a function to return a value. This should print a random tick size for each date, but fails:

.tickSize(function(d){ return Math.random() * 50 })

Answer 1

Here's your answer. Custom tick size on axis (d3js)

TLDR: tickSize can only accept numbers, not functions. You need to select them after they are drawn then resize them.

Answer 2

axis.tickSize doesn't accept a function as an argument. It only accepts a scalar value or an array of 2 scaler values (one value for the length of the inner ticks and one for the length of the 2 outer ticks at the end of the domain line).

If you wish to conditionally style ticks you can use post-selection to grab the ticks after they are drawn and either style them directly or set CSS classes to get them to pick up the styles you wish. There is a good example of how to do this here: D3 Axis Tick Post-selection.