D3/SVG: How to resize a d3.svg.axis with time scale by modifying range?

Question

I must be missing something obvious. Turning to SO after a day of frustrated headbanging ;-) :

Given that I have created a time domain axis using d3.time.scale and d3.svg.axis , how can I later modify the size of my axis by changing the range ? (Keeping the domain but in effect changing the size of the resulting axis)

I have read and followed many different examples, but either they do not use a time scale, or just change the domain. The closest I got is http://bl.ocks.org/d3noob/7030f35b72de721622b8 , but I can't seem to get the pattern from that example to work.

I have a codepen at http://codepen.io/anon/pen/MaZJYM The code is a bit funny since I have cut bits and pieces out of my code which is in an ES6 class, but it shows the problem exactly: Press the button. Nothing (Except a strange text anchor change??) happens when I change the range and re-run the axis calls as in the linked example.

Answer 1

Your update function should be like this:

function updateAxes() {
    timeScale.range( [30, 500 ] );//give a slight x

d3.select( '.axis.month' )
        .call( monthAxis )
        .selectAll( ".tick text" )
        .style( "text-anchor", "start" )
        .attr( "x", 2 )
        .attr( "y", 3 );
    d3.select( '.axis.date' )//your code its .axis.day which is wrong
    .call( dayAxis ).selectAll( ".tick text" )
        .style( "text-anchor", "middle" )
        .classed( "date", true )

}

Note: you will have to set the style to the axis in update else it will jump on the other ticks as in your fiddle.

Working example here

Hope this helps