How to define a custom time interval in d3.js

Question

I am trying to code an interval round function using the d3.js time interval API .

What I want to do is pretty simple: write a function that rounds the time to the next 6 hours and returns it as a Date object.

For instance:

• At 10:30 d3.hour.my6HourRound(new Date) should be back today today.
• At 12:30 d3.hour.my6HourRound(new Date) should be back today today.
• At 23:50 d3.hour.my6HourRound(new Date) should be back tomorrow 00:00

It should not be so difficult, but the d3.js api lacks demonstrations of use in the API.

Answer 1

Here is my solution that uses d3 built-in functions:

 function another6HourRound(date) { var subHalf = d3.time.hour.offset(date, -3); var addHalf = d3.time.hour.offset(date, 3); return d3.time.hours(subHalf, addHalf, 6)[0]; } 

Returns the nearest 6-hour interval (at 00, 06, 12, or 18)

Answer 2

You are looking for this example: http://bl.ocks.org/mbostock/4149176

A working example for your case: http://bl.ocks.org/musically-ut/7699650

Code from Example

 function timeFormat(formats) { return function(date) { var i = formats.length - 1, f = formats[i]; while (!f[1](date)) f = formats[--i]; return d3.functor(f[0])(date); }; } var customTimeFormat = timeFormat([ [d3.time.format("%Y"), function() { return true; }], [d3.time.format("%B"), function(d) { return d.getMonth(); }], [d3.time.format("%b %d"), function(d) { return d.getDate() != 1; }], [d3.time.format("%a %d"), function(d) { return d.getDay() && d.getDate() != 1; }], [d3.time.format("%I %p"), function(d) { return d.getHours(); }], [d3.time.format("%I:%M"), function(d) { return d.getMinutes(); }], [d3.time.format(":%S"), function(d) { return d.getSeconds(); }], [d3.time.format(".%L"), function(d) { return d.getMilliseconds(); }] ]); var xAxis = d3.svg.axis() .scale(x) // x is a scale. .tickFormat(customTimeFormat); 

In your case, you need something like this:

 var customTimeFormat = timeFormat([ ["00:00", function () { return true; }], ["06:00", function (d) { return 3 <= d.getHours() && d.getHours() < 9; }], ["12:00", function (d) { return 9 <= d.getHours() && d.getHours() < 15; }], ["18:00", function (d) { return 15 <= d.getHours() && d.getHours() < 21; }] ]); 

Answer 3

Ok, I implemented my own solution. Immersed in the source code of D3, I found how they write their time functions. For an hour, I like this:

  d3_time.hour = d3_time_interval(function(date) { var timezone = date.getTimezoneOffset() / 60; return new d3_date((Math.floor(date / 36e5 - timezone) + timezone) * 36e5); }, function(date, offset) { date.setTime(date.getTime() + Math.floor(offset) * 36e5); }, function(date) { return date.getHours(); }); d3_time.hours = d3_time.hour.range; d3_time.hours.utc = d3_time.hour.utc.range; 

and i just write

 my6HourRound = function(date) { var hours = 6; var timezone = date.getTimezoneOffset() / 60; return new Date((Math.floor(date / 36e5 / hours - timezone) + timezone) * 36e5 * hours); } 

which is working. I am pretty sure that there is a better method that makes this generic using D3 functions. Otherwise, you need to define custom functions for the day, month, week, year, etc. Therefore, I do not accept my own question.

I look forward to one who does it differently.