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

Question

[gsdev99]

https://codepen.io/gsdev99/pen/ExaxqXe
Всем привет, как отобразить только номер года на шкале x.
Также, например, в моем случае, данные начинаются от 2018 года.
Как увидеть 2018 и так далее на шкале?
Я пробовал следующее решение (в качестве начала интервала брать дату из конца предыдущего года), но отображается, по-моему совсем не так как нужно:

const xScale = d3
  .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')))

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

Answer 1

[Владимир]

Который раз задаешь вопрос на одну и туже тему ?
1) d3.min(positiveChartPoints, d => new Date(d.date)).setMonth(-1), не правильно
Именно из-за этой строки у тебя пустая область и вылазит
Долно быть d3.min(positiveChartPoints, d => new Date(d.date))
С тиками
.ticks(2)
Вот это кусок кода заставляет d3 использовать свой генератор тиков и оно расставляет два тика равномерно на шкале. Для того, чтобы управлять размещением тиков, тебе нужно использовать tickValues
https://github.com/d3/d3-axis#axis_tickValues
В твоем случае примерно так

.axisBottom(xScale)
         .tickValues([new Date("2018-12-02"), new Date("2019-04-30")])
         .tickFormat(d3.timeFormat('%Y')))

Для того, чтобы динамически управлять расположением тиков, вместо массива вы можете передать в качестве аргумента функцию генератор, которая вым выдаст два равномерно расположенных тика в зависимости от вашего массива значений

https://codepen.io/casufi/pen/WNbbbXj

Comments

[gsdev99]

Спасибо.