Тики даты D3 v4 никогда не отображают последний элемент

Question

Я использую D3 v4 для построения очень простого графика.Я использую шкалу времени для оси х.Я знаю, что D3 сохраняет контроль над количеством показанных тиков при использовании шкалы времени.Но это, кажется, не объясняет поведение здесь.

Кодовая ручка (ссылка ниже) показывает RTC поведения.У меня есть 5 дат, которые очень просто определены как 2018-10-10, 2018-10-11 и так далее.Я использую d3.scaleTime() и d3.axisBottom(), ничего особенного.

Независимо от того, что я делаю, последняя дата никогда не включена в отметки.Почему это происходит?

Вот ссылка на кодовое поле

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