Я использую d3 версии 5.9.2 и строю данные на гистограмме , которая представляет собой массив объектов, определяющих показания с устройства, снятые в каждый час. JSON выглядит так. Как видите, значение date - это год, месяц, день, а затем час:
[
{ date: "2019-01-01 0", value: 100 },
{ date: "2019-01-01 1", value: 150 },
{ date: "2019-01-01 2", value: 75 },
...
]
Я использую scaleBand() для определения шкалы X следующим образом:
var coX_Chart = d3.scaleBand().range([0, coChartCanvasWidth]);
И я показываю метки оси X, например:
var coXAxis_Chart = d3.axisBottom(coX_Chart)
.scale(coX_Chart);
В результате каждый тик оси отображается как значение в поле date. Я знаю, что могу настроить это с помощью функции tickFormat(), но я хочу, чтобы она была умнее, потому что данные, загружаемые в эту диаграмму, основаны на выборе пользователя. Пользователь может выбрать просмотр данных за один день, за неделю, за месяц и даже за несколько лет.
Я сделал графики, используя scaleTime(), и метка по умолчанию для тиков достаточно умна, чтобы показывать день, час, месяц и т. Д. В зависимости от степени детализации данных (независимо от того, просматривает ли пользователь ценность за 1 день или 1 год)
Мой вопрос: Как мне получить этот уровень гибкости / интеллекта в гистограмме, которая использует scaleBand()?
Скрипка: https://jsfiddle.net/23049auv/4/
Спасибо