Como posso criar um formatador de eixo personalizado para horas e minutos em d3.js?
Eu tenho um conjunto de dados que estou representando graficamente com d3.js. O eixo x representa o tempo (em minutos). Eu gostaria de exibir este eixo em umhh:mm
formato, e não consigo encontrar uma maneira de fazer isso de forma limpa dentro do d3.
Meu código de eixo se parece com:
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.svg.axis()
.scale(x)
.orient('bottom'));
Que gera rótulos em minutos que parece[100, 115, 130, 140]
etc.
Minha solução atual é selecionar otext
elementos depois de terem sido gerados e substituí-los por uma função:
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;
});
Isso produz tiques de eixo como[1:40, 1:55, 2:10]
etc.
Mas isso parece janky e evita o uso ded3.format
. Existe uma maneira melhor de fazer esses rótulos?