Adjust time scale representation on axis – D3js
In d3.js we use Time Scale on an axis, generally x-axis, to represent time in charts. To simplify manipulation of iteration over time intervals, D3 provides a handful of utilities in addition to time scale and time format.
d3.time.scale() creates a time scale with some domain and range values, the time scale also provides suitable ticks based on time intervals.
The following time intervals are considered for automatic ticks:
- 1-, 5-, 15- and 30-second.
- 1-, 5-, 15- and 30-minute.
- 1-, 3-, 6- and 12-hour.
- 1- and 2-day.
- 1-week.
- 1- and 3-month.
- 1-year.
Usually, we use:
[javascript]
var x = d3.time.scale()
.domain([dates])
.range([values]);
[/javascript]
If dates is specified, scale.domain([dates]) sets the scale’s input domain to the specified array of dates. The array must contain two or more dates.
If values is specified, scale.range([values]) sets the scale’s output range to the specified array of values. The array must contain two or more values.
For more details refer Time Scales.
Defining your axis:
[java]
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(12);
[/java]
This would give us this default time intervals provided by d3.time.scale, the ticks will always include prior mentioned automatic ticks.
Recently, I was working on a project which required charts showing Time-based Statistics. We wanted to have 2-days aggregated data, hence my requirement was to have a tick only after 2-days interval. It works well, until there is a change in month. This JSFiddle shows the problem. Notice the dates when month changes from March to April.
If you want to avoid auto-generated ticks, then you would need to change the implementation of d3.time.scale. To do so, all you need is a custom function which will override former’s existing definition with the following signature:
[java]function customTickFunc (t0, t1, step)
{}
[/java]
where:
t0 and t1 are start and end of dates on domain.
step is optional step count.
Here is my function’s implementation
[java]
function customTickFunc (t0, t1, step)
{
var startTime = new Date(t0),
endTime= new Date(t1), times = [];
endTime.setUTCDate(endTime.getUTCDate() + 1);
while (startTime < endTime) {
startTime.setUTCDate(startTime.getUTCDate() + 2);
times.push(new Date(startTime));
}
return times;
}
[/java]
Now when we do
[java]
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(customTickFunc);
[/java]
The above will create the required ticks, overriding default tick behaviour. Here is the JSFiddle
Hi I have a requirement to create a irregular time interval graphs with no of weeks in as month which can be either 4 or 5. And that too with sliders which depicts starting and end point in terms of week date. I am unsure like how to achieve that.