Как отобразить только номер года на шкале x в d3.js?

Вопрос-ответ JavaScript
1

https://codepen.io/gsdev99/pen/ExaxqXe

Всем привет, как отобразить только номер года на шкале x.

Также, например, в моем случае, данные начинаются от 2018 года.

Как увидеть 2018 и так далее на шкале?

Я пробовал следующее решение (в качестве начала интервала брать дату из конца предыдущего года), но отображается, по-моему совсем не так как нужно:

  .scaleTime()
  // .domain([xMin, xMax])
  .domain([
      d3.min(positiveChartPoints, d => new Date(d.date)).setMonth(-1),
      d3.max(positiveChartPoints, d => new Date(d.date))
  ])
  .range([0, graphWidth])

 svg
   .append('g')
   .attr('id', 'xAxis')
   .attr('transform', `translate(0, ${graphHeight})`)
   .call(d3
         .axisBottom(xScale)
         .ticks(2)
         .tickFormat(d3.timeFormat('%Y')))


svg
   .append('g')
   .attr('id', 'xAxis')
   .attr('transform', `translate(0, ${graphHeight})`)
   .call(d3
         .axisBottom(xScale)
         .ticks(2)
         .tickFormat(d3.timeFormat('%Y')))

Подскажите, пожалуйста, что я делаю не так?

2

По ссылке я вижу года на шкале X. Что именно не так с наблюдаемым результатом?

35
351522×798 17.8 KB

3

Первый вопрос, насколько правильное решение для того, чтоы увидитеть на шкале x первый год, в момем случае 2018:
d3.min(positiveChartPoints, d => new Date(d.date)).setMonth(-1),
Второй вопрос: сама кривая график, по-моему визуализировалась не правильно. Она же ,по идее, должна начаться с начала графика. Так как данных за 2018 год немного, я предполаю, что большую часть области должны занимать данные за 2019. В итоге за 2018 большая пустая область, а за 2019 сжатая.

4

Это некорректный подход. Из-за него происходит сдвиг.

Если этот блок убрать, то на шкале я наблюдаю дважды 2019 год. Так и не понял как починить, но точно нужно избавляться от строки что была раньше.