使用d3和dc.js的自定义时间线刻度 [英] Custom timeline tick with d3 and dc.js

问题描述

我有下一张图表:

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

如何更改我的.xUnits和.round以使用每5/10/15分钟作为一个时间间隔?

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

更新:

戈登的答案有所帮助，但放大后出现了新问题.

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

这是5分钟的间隔:

This is 5 mins interval:

缩放后，我的图表不好:(如何在过滤后将所有分组重新分组到1分钟的间隔?这是真的吗?

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

推荐答案

感谢 Gordon 寻求帮助. 我使用了d3.js version 3和此主题. 首先，您需要复制d3_time_interval函数，因为它没有公开.

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();

这篇关于使用d3和dc.js的自定义时间线刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！