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 问题的日期时间，但没有找到一个很好的解决方案来在不使用库的情况下为所有网络浏览器处理它。

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

Answer 3

这个问题的详细解答和讨论是这里。

简而言之：

只需将

.nice()

添加到比例定义中即可。

示例：

修复前：

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

修复后：

let xAxisScale = d3
.scaleTime()
.domain([min, max])
.nice() // <- add this 
.range([0, width]);