Как правильно вывести данные (год) x axios в d3.js?

Question

[gsdev99]

Всем привет. У меня есть простой график (line chart) на d3.js. Мне необходимо вывести данные за два года. Фактически сейчас и есть все данные за два года. Мне необходимо по оси y отобразить единожды только год.
Пример на картинке.
Сейчас же у меня выводится 2019 несколько раз, а 2018 визуально отсутствует.
Хотелось бы добиться, что бы визуально на шкале x был виден 2018 и 2019.
В будущем могут приходить данные в большом количестве за разные года, например: 2016 (40 объектов), 2018 (30 объектов), 2019 (10 объектов).
На шкале x:
2016 2018 2019
Буду признателен любой помощи.
https://codepen.io/gsdev99/pen/oNNKpQY

Comments

[Владимир]

А картинка то где? ТО что на графике сейчас на кодепене - желаемый результат или это то что получилось сделать?

[gsdev99]

Владимир, Добавил картинку, это то, что нужно получить. На шкале, в данном случае, должны быть видны 2018 и 2019 по одному разу.

Answer 1

[Владимир]

Чтобы d3 не использовал внутренний генератор тиков можно explicitly определить в tickValues
его можно использовать совместно с tickFormat

https://github.com/d3/d3-axis/blob/v1.0.12/README....
https://github.com/d3/d3-axis/blob/v1.0.12/README....