d3 - Отформатируйте целое число как время на 24-часовых часах

Question

Я видел другие вопросы, подобные этому, но мой - это немного уникальный случай.

Я рисую точки с симулятора, который собирает данные каждые 9 секунд в течение 24-часового периода. Это возвращает массив, содержащий 9600 значений.

В настоящее время я показываю только целые числа, преобразовывая индекс массива в целое число от 0 до 24, умножая его на 0,0025 (9/60/60 == 0,0025). Итак, 9600 * .0025 == 24.

Однако, я хотел бы также показывать полтора квартала, так что 1:15 AM будет отображаться как 1:15, а 3:30 PM будет отображаться как 15:30.

Как это сделать?

Answer 1

Если я правильно понял, возможно, было бы проще установить базовую дату в полночь, а затем добавить к ней, чтобы вы могли использовать d3.time.format, в какой-то форме ниже.

var i = 4800 
var date = new Date(); 
date.setHours(0,0,0,0); //set date to midnight 

var format = d3.time.format("%H:%M %p") //format to Hour Minutes 
date.setSeconds(date.getSeconds() + (9 * i)); //9*4800 for Noon 

alert(format(date)) //Alerts 12 P.M. 

Затем используйте формат клеща для оси для каждой четверти часа, что похоже на ниже

d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(d3.time.minutes, 15) 
    .tickFormat(d3.time.format("%H:%M")); 

Answer 2

В случае, если кто-то имеет диапазон целых чисел и хочет, чтобы использовать их в качестве часов при отображении тиков здесь раствор для v4:

var yScale = d3.scaleLinear() 
    .domain(timeExtent) // [6, 20] from 06:00 to 20:00 
    .range([0, height - cellHeight]); 

var yAxis = d3.axisLeft(yScale) 
    .tickFormat(function (hour) { 
     var now = new Date(); 
     now.setHours(hour, 0, 0, 0); 
     return d3.timeFormat("%H:%M")(now); 
    });