Как создать собственный формат координат часов и минут в 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