How to convert D3 time scale from V3 to V4?

Question

I want to convert this code from V3 of D3.js to V4 version:

var monthArray = d3.time.scale()
                .domain(d3.extent(metricMonths))
                .ticks(d3.time.months, 1);

Answer 1

The code in the snippet will work for D3 V4 :

 const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const xScale = d3.scaleTime().domain([new Date(2020, 0, 1), new Date(2020, 11, 1)]).range([0, 500]); const xAxis = d3.axisBottom().scale(xScale).ticks(12).tickFormat(d => months[d.getMonth()]) const svg = d3.select("svg") svg.append("g").attr("transform", "translate(20,30)").call(xAxis);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <svg width="600" height="100" />

UPD : This code will also work as well:

const xScale = d3.scaleLinear()
        .domain([0, 11])
        .range([0, 500]);

const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(12)
        .tickFormat(d => months[d])