JSFiddle - React, Tailwind, and code Playground

JavaScript

var svg = d3.select("body").append("svg");

var scale = d3.scale.linear().range([0,500]);

var axis = d3.svg.axis().scale(scale);

var g = svg.append("g").attr('class', 'x-axis');

g.attr("transform", "translate(0,10)");

g.call(axis);

window.setTimeout(function() {
    scale = d3.scale.linear().range([0,300]);
    axis = d3.svg.axis().scale(scale);
    
    svg.select('.x-axis')
        .transition().duration(1500).attr("transform", "translate(0,100)");
    svg.select('.x-axis')
        .transition().duration(1500).call(axis);
}, 2000);