D3 v4日期刻度永遠不會顯示最后一項

Question

我正在使用D3 v4建立一個非常簡單的圖表。 我在x軸上使用時間刻度。 我知道，使用時間刻度時，D3可以控制顯示的刻度數。 但這似乎不能解釋這里的行為。

代碼筆（在下面鏈接）顯示了行為的RTC。 我有5個日期，很簡單定義為2018-10-10 ， 2018-10-11 ，依此類推。 我正在使用d3.scaleTime()和d3.axisBottom() ，沒什么d3.axisBottom() 。

不管我做什么，最后一個日期都不會包含在刻度線中。 為什么會這樣呢？

這是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")));