@gsdev99

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

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 сжатая.
  • Вопрос задан
  • 45 просмотров
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Mentalstack Санкт-Петербург
от 100 000 до 150 000 ₽
Stream Labs Москва
До 150 000 ₽
Salesbeat Москва
от 150 000 до 250 000 ₽
26 февр. 2020, в 01:14
600 руб./в час
26 февр. 2020, в 01:13
1500 руб./за проект
25 февр. 2020, в 23:26
100000 руб./за проект