d3.jsaxisaxis-labels

D3js first tick label is missing

I don't understand why the first label (2000) is missing. I compared it to many examples without finding why.

axis

    let xAxisScale = d3
        .scaleTime()
        .domain([min, max]) // 2000, 2013
        .range([0, width]);

        xAxis = d3
        .axisBottom()
        .tickFormat(d3.timeFormat('%Y'))
        .tickPadding(5)
        .ticks(d3.timeYear)
        .scale(xAxisScale);

        gx = innerSpace
        .append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

Do you see any errors ?

Thanks !

Solution

  • Next to your nice answer I tried different ways to get a datetime without utc / gmt problems but didn't find a nice solution of dealing with it for all web explorer without using library.

    The best solution I find is to use the library momentjs because momentjs will nicely handle the timezone :

    const minMoment = moment(`01/01/${minDate}`, 'DD/MM/YYYY', true);
const maxMoment = moment(`01/01/${maxDate}`, 'DD/MM/YYYY', true);

this.xAxisScale = d3
    .scaleTime()
    .domain([minMoment.toDate(), maxMoment.toDate()])
    .range([0, width]);