javascript - D3 v4 日期刻度从不显示最后一项

Question

我正在使用 D3 v4 构建一个非常简单的图表。我在 x 轴上使用时间刻度。我知道在使用时间刻度时，D3 保持对显示的刻度数的控制。但这似乎并不能解释这里的行为。

codepen(下面链接)显示了该行为的 RTC。我有 5 个日期，非常简单地定义为 2018-10-10、2018-10-11 等等。我正在使用 d3.scaleTime() 和 d3.axisBottom()，没什么花哨的。

无论我做什么，最后一个日期都不会包含在刻度线中。为什么会发生这种情况？

Here's a link to the codepen

Answer 1

在 d3 中使用时间刻度时存在某些挑战。这是工作代码。您可以相应地更新刻度格式和高度/宽度-

var svg = d3.select('#graph')
  .attr('width', '400px')
  .attr('height', '200px')

var data = [
  new Date('2018-10-10'),
  new Date('2018-10-11'),
  new Date('2018-10-12'),
  new Date('2018-10-13'),
  new Date('2018-10-14')
]

var x = d3.scaleTime().range([50, 350])

x.domain(d3.extent(data))

svg.append('g')
  .attr('class', 'x-axis')
  .call(d3.axisBottom(x) .tickValues(data.map(function(d){return d}))
                .tickFormat(d3.timeFormat("%Y-%m-%d")));