D3js第一个刻度标签丢失

Question

我不明白为什么缺少第一个标签（2000）。我将其与许多示例进行了比较，但没有找到原因。

    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);

您看到任何错误吗？

谢谢！

Answer 1

此问题可能是由于min日期中的细微差异。这取决于您构造min日期的方式。

例如，如果您的时区> 0，则new Date('2000-01-01')不包括2000年。您可以编写new Date('2000-01-01T00:00:00Z')来使用UTC。

此外，如果您使用new Date(YYYY, MM, DD)，则应考虑到，该月从零开始，而天从一开始。

在此处了解有关解决该问题的正确方法：http://bl.ocks.org/jebeck/9671241

Answer 2

在您的好答案旁边，我尝试了多种方法来获取没有utc / gmt问题的日期时间，但没有找到一种在不使用库的情况下为所有Web资源管理器处理日期的好方法。

我发现最好的解决方案是使用momentjs库，因为momentjs将很好地处理时区：

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]);