使用 d3 和 dc.js 自定义时间轴

Question

我有下一张图表：

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

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

更新：

Gordon 的回答很有帮助，但缩放后我遇到了新问题。

这是 5 分钟的间隔：

缩放后我的图表很糟糕 :( 我如何 'reGroup' 过滤后所有间隔为 1 分钟？这是真的吗？

Answer 1

感谢 Gordon 的帮助。我使用了 d3.js version 3 和 this 主题。首先你需要复制 d3_time_interval 函数，因为它没有暴露。

接下来我创建了函数并将其用于分组。

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 自定义时间轴

Custom timeline tick with d3 and dc.js

javascript

d3.js

dc.js