CODEWITHSUNDEEP
javascriptd3.jsdc.js
sf_
sf_

Reputation: 1206

Custom timeline tick with d3 and dc.js

I have next chart:

scrollChart
   ...
   .x(d3.time.scale().domain([startDate, endDate]))
   .round(d3.time.minutes)
   .alwaysUseRounding(true)
   .xUnits(d3.time.minutes);

How can I change my .xUnits and .round to use each 5/10/15 minutes as an time interval?

Update:

Gordon's answer helped, but I have new problem after zooming.

This is 5 mins interval: enter image description here

And after my zooming I have bad chart :( How can I 'reGroup' all to 1 min interval after filtering? Is it real?

enter image description here

Upvotes: 1

Views: 593

Answers (1)

sf_
sf_

Reputation: 1206

Thanks Gordon for help. I used d3.js version 3 and this topic. Firstly you need to copy d3_time_interval function, because it's not exposed.

Next I created function and use it in grouping.

const n_minutes_interval = (nMins) => {
    let denom = 6e4*nMins;
    return d3_time_interval(
         date => new d3_date(Math.floor(date / denom) * denom,
        (date, offset) => date.setTime(date.getTime() + Math.floor(offset) * denom, 
        date => date.getMinutes());
}

let myTimeInterval = n_minutes_interval(5);
let myGroup = dim.group(d => myTimeInterval(d)).someReduceFunction();

Upvotes: 1

Related Questions