Как создать собственный формат координат часов и минут в d3.js?
У меня есть набор данных, который я рисую с помощью d3.js. Ось x представляет время (в минутах). Я хотел бы отобразить эту ось в формате hh:mm, и я не могу найти способ сделать это чисто в d3.
Мой код оси выглядит следующим образом:
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.svg.axis()
.scale(x)
.orient('bottom'));
Что генерирует метки в минутах, которые выглядят как [100, 115, 130, 140] и т.д.
Мое текущее решение состоит в том, чтобы выбрать элементы text после их создания и переопределить их с помощью функции:
svg.selectAll('.x.axis text')
.text(function(d) {
d = d.toFixed();
var hours = Math.floor(d / 60);
var minutes = pad((d % 60), 2);
return hours + ":" + minutes;
});
Эта ось выводит значения типа [1:40, 1:55, 2:10] и т.д.
Но это чувствует зависть и избегает использования d3.format. Есть ли лучший способ сделать эти ярлыки?
Ответы
Ответ 1
Если у вас абсолютное время, вы, вероятно, захотите преобразовать свои данные x в JavaScript Объекты даты, а не просто числа, а затем вы хотите использовать d3.time.scale и d3. time.format. Пример формата "hh: mm" для оси:
d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H:%M"));
И вообще, вам может и не нужно указывать формат тика; в зависимости от области вашего масштаба и количества тиков,
Если у вас относительное время, т.е. длительности (и, следовательно, есть числа, представляющие минуты, а не абсолютные даты), вы можете отформатировать их как даты, выбрав произвольную эпоху и конвертируя "на лету", Таким образом, вы можете оставить данные как цифры. Например:
var formatTime = d3.time.format("%H:%M"),
formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };
Поскольку отображаются только минуты и часы, не важно, какую эпоху вы выбираете. Вот пример использования этой техники для форматирования распределения продолжительности:
