Dynamic rescaling of axes

In some cases, the scale used by axes might change when triggered by user interaction or changes from data feeds. For example, a user may change the time range for the visualization. This kind of change also needs to be reflected by rescaling the axes. In this recipe, we will explore how this can be achieved dynamically while also redrawing the grid lines associated with each tick.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/rescaling.html

How to do it...

The following is the code that shows how to perform dynamic rescaling:

<script type="text/javascript"> 
    var height = 500,  
        width = 500,  
        margin = 25, 
        xAxis, yAxis, xAxisLength, yAxisLength; 
     
    var svg = d3.select("body").append("svg")      
            .attr("class", "axis")     
            .attr("width", width) 
         ...