缺少 D3js 第一个刻度标签答案

【问题标题】：D3js first tick label is missing缺少 D3js 第一个刻度标签
【发布时间】：2018-11-22 13:38:21
【问题描述】：

我不明白为什么缺少第一个标签 (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);

您是否发现任何错误？

谢谢！

【问题讨论】：

标签： d3.js axis axis-labels

【解决方案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

【讨论】：

【解决方案2】：

在你的好答案旁边，我尝试了不同的方法来获得没有 utc / gmt 问题的日期时间，但没有找到一个很好的解决方案，可以在不使用库的情况下为所有网络浏览器处理它。

我发现最好的解决方案是使用库 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]);

【讨论】：